|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% v2 G: P% c) E* h. K7 {9 v
关键在于：max-width:780px;以及下面那行。4 R; s) `- ~8 n+ t! S# @5 l! D
固定像素适应:6 s2 b# r* Z8 U& Q8 q. J
5 S8 F' P- m! ]dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 以下是引用片段：6 O1 o1 E6 L& [1 [* `1 C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! C/ [; Q6 A2 s# u+ q( G( N<html xmlns="http://www.w3.org/1999/xhtml";>
6 S5 n, @1 o4 z+ {% N<head>
3 f* ?+ V8 `: j9 G6 m6 v+ q<meta http-equiv="Content-Type" c />
" k; y/ a2 u+ }. \) x5 H<title>css2.0 VS ie</title> . P, _- }$ J$ y' b4 v5 \
<style type="text/css"> ' n7 Y9 J% ^, n
<!-- & J6 L# j5 s/ Q1 s: g
body { $ ~7 _4 M2 N, }' S# o; l: z# o
font-size: 12px; 8 N: h6 M6 Y6 ?$ ~7 [* R6 v
text-align: center; ! Y" ]0 _8 \) G* E% {
margin: 0px;
! c! D: z8 c( C3 bpadding: 0px; ! I& P) O- O1 p3 H
}
& I: c/ S- n' C, u, F5 x#pic{ 0 J7 z$ g, f/ M& ^) ?
margin:0 auto; ) L& [2 D8 X5 t
width:800px;
' V* I x: |( a0 O5 n# [6 D padding:0; 6 R* F) @! J4 z% F. L' ^% m
border:1px solid #333; : t" z% H: k( c+ @
} 7 e' k! {( R0 y4 B# H7 I' x, V [
#pic img{
9 s& r$ d: r6 r# v* T/ ] max-width:780px;
7 q3 W1 }' e$ P8 Gwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); . w M1 C( Y1 x( l# n" ]
border:1px dashed #000; ) s4 v% g7 M' |4 X6 G( o) w
} f9 Z$ j7 f- ^% P: z# e
-->
6 Z" C& A0 Z4 z: M) a</style>
, O# ]% P! m/ \9 \2 X3 H! c8 S</head> 3 N+ x7 ^+ N6 ?! E9 E) r
<body>
5 a5 H/ F5 F0 Y<div id="pic">
4 I# A: o. l( Q. T) X4 q1 c/ s<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' S0 b! ~# a3 C* g1 c</div> ; [: O) i( }- r0 `! b
</body> 4 k* C% z8 z" f% [- |% S
</html> 5 @, m- L7 j- h7 J) ]! I
, J3 X8 Y" A7 V& {' t. [百分比适应:8 L0 y1 Z; v- A( u! ]
以下是引用片段：
2 u! g$ o. e, v' h5 h& \/ T<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. \ h& u, T. @<html xmlns="http://www.w3.org/1999/xhtml";>
. Q( I, c( d0 } P% O' ?: m9 W<head> 2 R) X7 X# g; k f
<meta http-equiv="Content-Type" c />
* B6 E+ |: X" ^) K; G* r<title>css2.0 VS ie</title>
5 [. M. @6 K# n& @( h<style type="text/css"> : `' f1 x0 H5 F
<!-- & o- x: P; {& y6 }
body { , o2 D6 K) ?' A% B, D
font-size: 12px;
; K+ U% X! x$ xtext-align: center;
& c; K3 ^! h6 F3 O6 S" B4 C$ jmargin: 0px; & C& N- j% z2 a, _& H2 G
padding: 0px;
( k4 p" v6 L: r, d" j* o6 a% x}
: }, m# \. E2 M+ C- V( Y1 U. J, H#pic{ 2 p V- g) F+ g- {; c
margin:0 auto;
1 r" x+ j* p# z$ u width:800px; * C/ |" v M/ Y, g* N* @" J
padding:0;
( C9 Y6 K0 ] { border:1px solid #333;
z% s& N! d8 z9 q7 M1 H6 C$ k }
; e9 x& ~% E5 e#pic img{ + I; V5 v9 v2 z3 q
max-width:780px; 5 P1 C" w O/ s& `3 ^( z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , ]1 C) H: o9 _
border:1px dashed #000; 5 g0 r2 s3 o/ p U T% i
}
' _4 U! o! R G4 ]; X/ v-->
9 Z1 `4 J6 ^: |2 |5 ]# w3 R7 ?</style>
. `0 B9 F! i. [</head> $ i+ Y1 ~* O/ I( u) N
<body> / s6 \2 x- b# R1 b( |/ G
<div id="pic"> , j/ p3 T* p% o, y8 `9 Z0 O3 O3 @
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + k% [1 k6 \6 K# \" g
</div>
: F# D; c: ~1 T+ l- T; c. p</body>
: ?+ V" F! D: O7 z0 ~: }</html> |
|
发表于 2007-12-8 14:55
| 