|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14325
- 金币
- 2448
- 威望
- 1647
- 贡献
- 1396
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。9 F ]7 Z" H) a
关键在于：max-width:780px;以及下面那行。4 k4 @7 G: [, @) R0 m" U
固定像素适应:
% F( ~0 H+ e8 m* W- L" _& N. I( a7 x9 C0 Y
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> 以下是引用片段：' d( T* z( G, A- ^5 Z0 F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ x& K! h- D0 ?/ y
<html xmlns="http://www.w3.org/1999/xhtml";>
/ B8 N, A- \% W/ t& G<head>
, Z' O0 c6 H" K/ `9 c# ]* q9 j+ n<meta http-equiv="Content-Type" c />
" u9 Y: p) n \6 W) K; b% R<title>css2.0 VS ie</title>
0 V V; B3 C+ C, h8 Q<style type="text/css">
' q8 e9 x7 M# e! ?" v8 G( Z: m<!-- & y% a9 D3 J/ t c
body { ) i# }! d6 F/ F" N
font-size: 12px;
( F5 D2 Y/ M* @text-align: center;
9 C R: c% j0 T6 b* s8 \3 l: Bmargin: 0px;
+ Q N3 i G5 i! K8 D% r" V' cpadding: 0px;
, _0 B2 @5 B( p7 U4 r& `4 X}
1 l! y. T# p' q$ |3 c#pic{
2 Y) h) D% J) f, v+ _, w margin:0 auto; 3 ~5 ]7 g) F" i0 ]
width:800px;
, g# {7 q. Q8 y7 j9 I& A padding:0;
. K' t; }4 H# @% V- f6 Q border:1px solid #333; & B' q. O8 x6 ?& _
} 1 @+ r t! }& {: `" c2 Y9 h5 X. k
#pic img{
9 i0 K" H: N, }6 ~ max-width:780px;
6 s- A5 I9 X/ V7 u b7 ~width:expression(document.body.clientWidth > 780? "780px": "auto" ); ! Q8 u; K: m+ l& O9 H
border:1px dashed #000; , D! }0 T( f m
} " E; q4 a' N! r7 \. b. P
--> & k2 W5 v. t ~
</style>
: l9 `5 X/ j5 v- [9 o</head>
1 z$ P$ p# s# l/ d+ u7 _" N<body>
2 z: w+ h& r6 E4 e" p: J<div id="pic"> 0 G3 W9 ?0 [, m! J
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 W/ O' @/ O; `. f3 j" v4 ]7 o1 a
</div>
# e! ?$ s/ f: s! K% u</body>
- Z0 R; y+ M i9 L6 b! _& U8 b8 s</html> $ ~3 P, }' A1 A# g! E
0 n! r) t3 \ @7 p+ ^, ?4 ?1 @百分比适应:
7 k4 v3 y4 ]+ A& _以下是引用片段：0 i2 z( A `+ z0 ]6 I( R7 l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 \5 M/ G8 p! \! x
<html xmlns="http://www.w3.org/1999/xhtml";> 7 L% X' \9 r, S; n- Z) j A X
<head>
9 M4 F' c: B7 I+ h- x i3 y, O<meta http-equiv="Content-Type" c />
# p+ `3 h; F1 t4 \7 w4 Z/ ~ V+ P' p<title>css2.0 VS ie</title> 1 b; t2 t* A8 ]* f
<style type="text/css"> 0 f+ g$ l% w5 ?+ E s! _! G2 z: n
<!--
" K; z$ P \ m9 E Qbody { 1 o7 i& {2 w$ T0 ]& y: K
font-size: 12px; + |+ T- }+ ^# h: C/ I
text-align: center;
9 l/ z' O6 J: n/ T2 Dmargin: 0px; ( j7 a D) k c
padding: 0px; 0 E2 r# B8 Q! p
}
& F4 |7 u: Q+ o5 D) q. g#pic{ - [ _+ K7 ^( z( v: x- j1 c& G! q
margin:0 auto; 5 r) F! }3 e( U* f
width:800px; 1 v6 U9 n( \) J7 T
padding:0;
" `! D6 d9 M2 N w$ M( K border:1px solid #333; - p5 t1 R* g) q
}
/ K' a0 @. z8 E1 |/ e* `' e/ D#pic img{
" I9 g( }! N2 a max-width:780px; : o: k& S+ K3 q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 a$ n5 r5 u; u/ @) U. c
border:1px dashed #000; - K2 a) K+ ]/ U" y4 b3 I
}
u0 D' X( P) j5 ~3 p+ d! R/ i. X--> 3 ]1 {) [- ~4 I3 F" v9 p3 Y0 ]
</style> % |" [2 I+ W; M( E$ }+ n4 L
</head>
' @1 a$ E' K6 u# V) P: r<body> ( x8 [8 f! E& L$ i+ o; ?
<div id="pic"> ( E) R W4 m+ B" z) ]* x
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% m/ j& F4 w9 S# k" |; e+ ~, P3 Q</div> 5 y3 w* |( F) ]+ O1 r
</body>
! ]1 k$ C8 ^ a5 w</html> |
|
发表于 2007-12-8 14:55
| 