以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。( l; e. I8 u' Q0 o/ G$ u
关键在于:max-width:780px;以及下面那行。3 i) c6 C- x8 a4 P+ l' p0 B 固定像素适应:: r8 T& q3 h" R0 l T3 H
8 {) W- K. H4 ~* |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> 以下是引用片段:: M1 }1 J- C! }7 ^5 O s- B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) P: z9 C9 a# x' V% T
<html xmlns="http://www.w3.org/1999/xhtml";> 1 u! P/ Y" J+ A8 k- s<head> ! o" r6 \$ F7 J( Q0 D
<meta http-equiv="Content-Type" c /> + R( c* U+ u7 v, ~<title>css2.0 VS ie</title> ! ]3 G/ I' s% c5 Y8 \
<style type="text/css"> 5 {* [2 a' u- J5 R9 N( K
<!-- 9 Y/ z7 m) O& j
body { 1 i( y6 e7 O, g% J, p1 O
font-size: 12px; 8 ]* ^$ _( h- ~3 b7 Y( W0 {! O
text-align: center; & \3 o( \+ p; b; J% b7 v' r1 c
margin: 0px; ) @- Y1 o4 A! z- d0 X- v0 Z
padding: 0px; " d" s3 @$ h- V! O( w2 x9 @3 Z3 i$ q
} # q5 d# x# ?. C' b% b#pic{ $ R# U6 E& P$ ]# y2 x; p
margin:0 auto; . l5 k) }# T h+ ]8 ?2 W width:800px; ' t$ j) g9 r0 H6 H( o
padding:0; ) J: o4 V1 a. ~ border:1px solid #333; , c- f |; F$ ]1 H \& R; a& [
} # j- D2 I# R( r! s0 e5 x( @
#pic img{ 2 N7 l! i. z3 ^) K7 [: G+ l4 ?+ c0 ` max-width:780px; / O7 I1 H& s ~1 X( s H6 @3 h+ C; e; H
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ( V" D% B. z9 f, j' n' d% y! Dborder:1px dashed #000; + ?5 M! J: U- }1 Y/ J- U; l3 R
} 7 c# s( A0 U ?
--> 2 v4 H7 z* m3 z7 C4 S
</style> s5 Q4 J7 Z8 N- }4 b3 h" r( F& t
</head> ( p) A3 F/ P8 Z<body> $ _% f* p c6 q! B$ Q0 j- a. t( m
<div id="pic"> ) B7 F; s1 X0 |2 |$ ]
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 k' T: i$ b3 E3 E; K5 ~' Y
</div> & L8 c+ P# z7 Q+ W6 i! A, q</body> ! |4 N+ B ]* k7 j</html> * B9 w4 o1 d- U' ^% h% ]+ C+ z# J' |# E5 n7 L
百分比适应: + n: ]3 p$ p ^* M1 H以下是引用片段:6 I' [# e- l- y( l: B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + _+ N; G; W0 b, i" l+ g
<html xmlns="http://www.w3.org/1999/xhtml";> 6 ^+ \" D& Y! ^6 ~6 T" R6 S<head> 0 n* i& G& O1 Y7 |
<meta http-equiv="Content-Type" c /> 3 l+ e1 \ ?$ j6 y' S<title>css2.0 VS ie</title> % E$ q% |4 k) E8 h1 v- s<style type="text/css"> ! {( q/ L: e" b$ Y% J) {8 E<!-- + H, ~. X" ?" V K( u6 s' h* V8 L9 R" ^
body { 8 ?1 w- t+ Q, [6 ^. D; hfont-size: 12px; % o: Z4 y( y4 L0 Otext-align: center; 0 }( S; V% u& F/ q5 M" y. x% Dmargin: 0px; 3 K2 T8 l3 \8 V4 C
padding: 0px; + R# a( ^- A! r
} % }7 Y% x5 y# C4 o$ B#pic{ * P% i0 d$ @% ?' o# g
margin:0 auto; 5 u$ d4 x7 N, L4 e1 x6 {
width:800px; + }; j/ ^9 p0 o+ ? padding:0; 1 I$ k/ E4 O# Q, F. d border:1px solid #333; + E u+ W0 \2 t" u* U3 r
} 4 U, ?$ I; j+ r. _" n
#pic img{ 5 f: }8 V" m' B x. q) K( Q, E
max-width:780px; / T0 G1 Y% _2 U% u+ C2 t' cwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); $ X6 B1 @# _/ S( Sborder:1px dashed #000; 1 y# _7 _9 F4 _
} f& P& r' Q( ^! Z. d( V t, ]( z
--> 1 q; k( k. ?2 p, _7 [) h: X</style> , j3 J! g4 f) l! T& Q( \" q
</head> 9 ]# e5 {$ O4 }
<body> 6 M9 V3 C; ~# y
<div id="pic"> # D u& R" n; F' a# V( u<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % \9 l; X& d# L5 m+ M
</div> 0 r5 T1 E6 I! [" S1 a; Y# L
</body> - b( t. p' r1 m) C& X</html>