|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! ?' A: s8 {% N, @1 a! e
关键在于：max-width:780px;以及下面那行。8 r7 a$ @1 Y5 H. \5 J( |, u6 }7 ?
固定像素适应:5 S/ y# E+ X. T& ~- m/ [: j9 k
( t1 l8 L+ U3 s5 j) a
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> 以下是引用片段：
9 x* x: g& |0 `# u+ x, ~( e4 {5 L9 d<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: k, t& E- I; V; o( B4 `1 ?<html xmlns="http://www.w3.org/1999/xhtml";> ( Y S. G7 e4 G$ n8 d% G- w
<head> # i+ b( V% [; X& U9 }4 [
<meta http-equiv="Content-Type" c />
, L: W W' p* Q<title>css2.0 VS ie</title>
, i; _$ o! T W5 {$ a<style type="text/css">
. Q9 n/ Z. y+ z: t<!-- / Z* q! l* ^( z% e- K& b7 c3 W
body {
9 s0 T5 ^+ C$ j$ {& dfont-size: 12px; " _+ n9 s# `( b
text-align: center; 9 g% v0 G' J7 p- B1 S4 s: k' s$ X7 v
margin: 0px;
& R" k+ r7 m4 ]& e; E) g' t: Ipadding: 0px; 6 J; X: @' x: D$ ]
} / F/ f2 v, F$ c: `; }) G8 E- B
#pic{ 6 o |" C; L/ f/ D
margin:0 auto; / K& T1 f+ U) C/ ~! E& @. A, {1 G
width:800px;
) z; r1 l( S. y( q+ d padding:0; 7 Q$ o6 x2 R& J0 W- }: Y4 M
border:1px solid #333; : s/ [8 _) a* F' ]
} + v& Y D! \2 D% y& T9 I
#pic img{ 6 E( C. p+ e% r
max-width:780px; 3 p9 w2 _% H3 ]6 ~2 J( `0 k
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 2 C. `, L' ~6 m. L1 V$ D& L
border:1px dashed #000;
' b0 p) @9 X* q+ N H* x Z}
7 a2 U) J. ]0 N3 W6 u& x- Y0 L--> - r, R |/ ^7 |) ^' l
</style> $ u! c8 z4 i e
</head>
7 z4 Z' F* L4 c# d: w: [<body> : J$ `. f4 i* x5 H$ T! b2 I/ Z- w
<div id="pic">
9 I, a1 L, I" Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & u" c. o2 \' }4 N: u l" `
</div> r' f# e. q, [2 Q4 ^, I }; k$ {* s
</body>
/ m/ V# H, {5 }</html> }* [$ s- x2 F* D
" H) k) i9 T, D2 @百分比适应:
. H4 U- I( D" T* r$ ^以下是引用片段：
( U; ?) S3 g9 E5 Q& b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% [: J- w6 e# J. u<html xmlns="http://www.w3.org/1999/xhtml";> ; X) B6 ]% k: u2 I% u; Y
<head> 7 ^+ W$ }4 M R/ m/ I
<meta http-equiv="Content-Type" c />
# K7 [4 z% j! P! Y X4 D( g<title>css2.0 VS ie</title>
( p2 U9 Q7 W$ L2 B<style type="text/css"> * Q, S' s' Q1 Z/ U4 \
<!-- / } W6 N. |* P6 N. T1 P1 X
body {
$ e. K& `, m; o5 efont-size: 12px;
& R- r1 p4 W6 t# B3 g; p6 Ntext-align: center; 1 w) Y; f% l8 V5 H, Q/ p
margin: 0px;
# k# i1 G T- N" k5 Epadding: 0px; 1 N( s1 p+ Z6 F* G% g* G
}
) q- C/ M( B! N9 X d$ b- N#pic{ # E6 y2 i3 H5 B) {+ k7 ]5 i; v: f
margin:0 auto; & V1 X, C' A2 k5 `7 N+ P
width:800px; . w" O% v; ?- j' g6 n* P0 F
padding:0;
8 k+ Z/ _& d2 g3 W border:1px solid #333;
9 p- x3 T& l" P8 a4 j }
3 v6 y6 T# g" ]& a3 |#pic img{ ! a \& J. {6 Q5 I% {* ^
max-width:780px; % h8 y V- N# D& Z2 }
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 2 L' h( a0 d% z) x% K+ |9 s) k3 }
border:1px dashed #000;
( _% d& H" i- D, e9 o; V} 6 c; v$ P: c* b, w4 W+ t1 Y
-->
3 l3 R# f! l/ l' N3 R$ V5 A* B</style> % P6 I1 `, t' p$ A
</head>
* |9 F8 d4 K8 @5 a7 X& U7 T<body>
' I1 a+ y' x( N1 V, y( W<div id="pic">
; g! [: i( N/ T( G. t<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) U/ }1 t" h N3 ]# y& p</div> 7 N( Y( @: Z' L1 @; ^$ L
</body> ' A9 O5 w& O; o, q/ `
</html> |
|
发表于 2007-12-8 14:55
| 