|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14161
- 金币
- 2371
- 威望
- 1647
- 贡献
- 1319
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" I# t# }) \- e2 f- m5 _( T关键在于：max-width:780px;以及下面那行。
9 n3 h! e6 o& O* W; Q7 u# F/ n固定像素适应:! z5 b' f1 n; O4 U
9 f; M& y7 j" X9 J& g. J+ t2 l; F
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> 以下是引用片段：" l6 F+ F* m0 u" D3 h$ O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / Z. n# A, l/ r3 V: |3 `6 y
<html xmlns="http://www.w3.org/1999/xhtml";> * o4 r2 W' E- }$ W- Y. g' b
<head>
/ i7 V9 d" }. N% ?<meta http-equiv="Content-Type" c /> . {5 }5 G2 ^# I/ d; x( X+ f6 v% B
<title>css2.0 VS ie</title>
9 t+ h2 Y) O R* t6 c3 L1 o* k<style type="text/css">
l! W! c t |<!-- " i% ^6 r. ?/ _- z( K
body { - u5 `/ l, c/ @( {% B- u
font-size: 12px;
7 t. U2 T l: L. V, t+ N6 F8 Ltext-align: center;
0 r3 U2 m) E, F" p0 Wmargin: 0px;
$ K" P0 x) @; ~7 x6 t$ V: Rpadding: 0px;
' w" y% N( r# Y+ x; {$ d$ x# j' c} * |# u% p e% a7 f# _
#pic{ & M" i% j, c$ v6 a
margin:0 auto;
; U' }+ H* t- j width:800px; 7 p" Y+ ? z; X0 u4 R; l4 `, ]
padding:0; ; K' T/ v9 @" y) Y% C# E3 y ^
border:1px solid #333;
+ n6 p% K8 L5 y4 R! Y8 H$ A }
; {! G9 F. Z: N# h1 O3 L#pic img{ 0 c( G; y' H7 Q) P/ R6 w+ _. C, q
max-width:780px; 8 z- C! J& m$ Y4 o* q* N4 O/ c
width:expression(document.body.clientWidth > 780? "780px": "auto" ); / e) [% w: {, h% o6 S
border:1px dashed #000;
6 z) j* } u9 Z3 W}
: P0 O0 f3 {) g- O8 {-->
6 @3 S7 O0 L9 n" k</style> - X: Y+ T6 ^/ {: Y2 ^' _; `
</head>
' E. C6 G" }9 l; r4 h9 k<body> 6 P$ [0 d- t7 Z. [- d: v
<div id="pic">
$ r! h; @% }& a<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( x6 b0 `3 o8 i8 h3 J) \</div>
0 F0 o) P' E/ t) h+ Y</body>
9 i& b0 X6 I& N# [. j2 g</html>
8 E, k" I, w& D- K9 J9 Y
R, G$ F5 ?( {百分比适应:
2 e4 X+ O Q% K8 J- U. z以下是引用片段：* \3 l2 l; Y2 J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 D" _2 Q7 J6 \ U<html xmlns="http://www.w3.org/1999/xhtml";> - Z6 u2 x' _; ]
<head>
2 @ X& H. z% ]& l5 {) n0 F<meta http-equiv="Content-Type" c />
, K, N" x" C7 ^( e! o, y, f7 x<title>css2.0 VS ie</title>
3 n4 o. H4 w- b9 ]6 g0 F" `* B<style type="text/css"> 5 k4 i+ C7 ^( n2 z- F- l. x6 I
<!-- ' `; B7 t5 q% G/ J
body { 4 o7 A0 K) u. u' R3 J2 W) i
font-size: 12px;
" L& H7 t5 ~: v/ S" Ytext-align: center;
) [4 M9 G1 k. R& q9 Y X: h; tmargin: 0px;
' y. |1 W$ o/ n- _: ]" u/ _$ Wpadding: 0px;
( Y& v5 d& U- N) N( Q4 @" e C d}
: u; g4 f! v! G& n0 ~5 n#pic{ 3 r5 T9 x3 e: o. Q3 l& h1 O) E
margin:0 auto;
$ ]! ~0 H- L0 Y3 u! o0 `2 d width:800px;
) ^ K( n" S4 U9 F6 F padding:0; 1 Q/ q' U$ v6 I8 y8 F# l- s: r
border:1px solid #333;
$ `( f# e+ n5 S8 H }
" D/ x* ~- I2 ?0 u0 g0 X#pic img{
& h' m6 K6 l- \# I) W* W max-width:780px; * v& b+ {. t; _2 {6 s, r& M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ; \( ~ p/ f6 Z+ G
border:1px dashed #000;
- @# Y/ k& Z$ n6 U# _5 r} / F) Y) r$ N0 F$ v
--> 3 K6 T) j! |( w3 b- ?; e' h
</style> * t: r9 w- M8 q; l. J# n
</head> . V/ g2 X* Z* p
<body> ' A g7 F: e1 W# J/ e9 N$ N
<div id="pic">
: M$ a; H6 }, v+ [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 x0 {! c2 q( m: @# h( d* j
</div> 4 \) D" ^1 p& W' ?+ z) @8 o$ e4 z4 S
</body>
) u; e$ n. u* U) T6 V$ v</html> |
|
发表于 2007-12-8 14:55
| 