以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 Y# m$ R5 k6 i; r8 ~关键在于：max-width:780px;以及下面那行。 # s# k0 y7 k' P7 x1 c' f H固定像素适应:% [/ C O8 S: r% B
" [% q9 o& ?' t2 t; Adotted; 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> 以下是引用片段：) m6 W( M! G' v/ ^$ j5 K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' [; ~; y: L6 O" b7 g<html xmlns="http://www.w3.org/1999/xhtml";> . i9 [! I) s* X
<head> 0 b7 N; S4 h* i4 m5 {3 X<meta http-equiv="Content-Type" c /> 4 | ~+ X. C( s! W) [" G" N<title>css2.0 VS ie</title> + ~* Q6 y7 L: d& ^+ T' X5 u! B<style type="text/css"> " E$ I: c# s. ?! \ D
<!-- ' P& _5 o- S* j9 gbody { ( w2 y* D& w; o, `/ s/ J3 S
font-size: 12px; 3 j: T; T) C% @) ?
text-align: center; 5 o- M1 ]# ^2 r- {* P, M( Fmargin: 0px; 5 l3 A, ?) R% Wpadding: 0px; ( x& b9 @6 }! r} : W5 O1 |1 `* x4 a
#pic{ + O$ [+ n0 l9 l% l: f2 t
margin:0 auto; r4 i5 D8 K: P! M3 l. F3 Q9 D width:800px; 4 s5 h4 E H/ t& U padding:0; . z$ R4 S6 o+ c9 b: r$ Y* t% J border:1px solid #333; 0 m! L* _( |8 e; e' g
} * |3 V/ H7 B0 N! B- j9 {8 ^#pic img{ " l" m3 a& n1 x$ _9 S. L
max-width:780px; - O; I1 G% C$ v" Ywidth:expression(document.body.clientWidth > 780? "780px": "auto" ); & I6 i" { @. s
border:1px dashed #000; . n" v y+ R7 K! P. s} ( a$ v; ?6 h# ]# }
--> 9 `2 T Y6 m7 o</style> 7 f: A6 j% c+ b. i) f
</head> 4 n4 Z1 @ _3 u<body> ; |; q7 v& h8 w+ x7 O$ n<div id="pic"> 8 d& N% g! N7 B4 S
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 j3 F7 { i$ X) X</div> + t7 k4 q5 i+ m; p9 Q( N</body> ; Q# n4 |* V% c
</html> % e& J$ s) i2 E
) L* T' j# Z9 T0 E4 V z/ z: m
百分比适应:7 Z3 k+ A! b L3 ^8 e
以下是引用片段：) N) x$ ^! s0 L$ ^9 h) U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 d6 J( z a7 B0 L<html xmlns="http://www.w3.org/1999/xhtml";> . a, s6 D/ S" G4 k) x, B4 w<head> 1 U* t$ j) j. Z5 w$ T$ R" D" ^$ d
<meta http-equiv="Content-Type" c /> . o& X+ p. _( g2 k! q
<title>css2.0 VS ie</title> 1 {( Q/ f- n$ ]$ O" Q; i
<style type="text/css"> 8 F7 Y/ c7 ?' [) e. l& _4 O; |; x3 ]
<!-- / o o8 R' J# B$ O% J# w
body { % F* c0 V5 K0 K* N# C' s4 ofont-size: 12px; % B$ I9 t- c: l* R0 f# B) \9 n
text-align: center; % J& p9 _1 ?/ e: g9 d3 i6 S, R2 L
margin: 0px; , ] S c( }% l: H ]
padding: 0px; & A- U' ~2 d- D; O7 \& x} 9 ]- Q9 A2 ~, g4 t' |6 A: r
#pic{ 9 A; S1 U4 Y" i; x- I0 X! \
margin:0 auto; : V4 Y& k, D' l2 E width:800px; ( ~! }7 G( F# p4 K; ^ padding:0; 1 y- \% Z. H0 R2 q
border:1px solid #333; ) g2 ?$ f0 x$ |* N0 a. {4 M8 @8 G7 ] } L. s+ ]0 h4 L#pic img{ , g2 y/ c+ \! U; h; B max-width:780px; ) o+ q5 y2 P) Z; `; I. i8 V$ c& Gwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " R$ \+ l9 o9 U r9 p- ]: N
border:1px dashed #000; & @% ?, E! _- h) ~ h! o6 b
} 2 i4 `( V4 W3 @# W4 n* s--> 7 j* j& P- c& p- v) ]% o/ l$ o</style> / K4 } K) i; D$ E, M+ X</head> " W4 D2 |9 n+ A3 G9 x. K b<body> 5 {2 e0 `3 O0 D/ x) k<div id="pic"> 2 ^( L4 B: @, V
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 [7 h# `! p; D% I2 T0 u& Z8 Z; e e
</div> 3 L" a1 v4 k# |# `% f' Y7 d
</body> 4 u/ m& l6 U) b0 Z* f- c. n4 F
</html>
