|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14331
- 金币
- 2451
- 威望
- 1647
- 贡献
- 1399
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. H+ ~' z- u0 P' x关键在于：max-width:780px;以及下面那行。! [+ ?9 }) h8 X$ T2 T4 m
固定像素适应:
6 ?9 w0 S; G* B$ C; O" D' y6 a, N ^! d2 ?
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> 以下是引用片段：
( M8 n; \& e0 {<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 z/ P, R6 @- M<html xmlns="http://www.w3.org/1999/xhtml";> : m- r! ~9 i! b- |
<head>
& ]( E. ]: P, c. |' j$ c<meta http-equiv="Content-Type" c />
; I9 C7 i' [& L<title>css2.0 VS ie</title> * y1 R; `' G% h- W& Y' [! ~
<style type="text/css">
9 [* e; k: J/ L3 i! f" u2 W<!--
0 ?# s& ]3 T( xbody {
1 Z- L- R! K% G: v* u5 Mfont-size: 12px; , V3 M5 O, G2 x) K0 [3 [ z
text-align: center; 1 a+ v+ k: \, o" F: S" A
margin: 0px; * K6 J" ?8 z. L, w0 M! u
padding: 0px; r# N) j6 j( M4 r' R
}
3 |; l' x6 v1 f8 I+ I#pic{
' Y2 M: ~9 C7 ]2 c2 y6 f1 ~) ]/ l margin:0 auto; 4 n2 o4 z; u% `! w& q5 _. l
width:800px;
, G& E! b9 ]# n" E% i" z padding:0;
: l4 b S7 G5 G# j/ s- J; d border:1px solid #333;
/ u' | u, ~$ l( I9 m } 6 ]! [- x% i0 t" K2 q, X( p1 R
#pic img{
$ S4 N# j/ r* b4 j( D. k7 G% a4 X max-width:780px;
/ T2 o6 B" J% v Xwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
& A7 S, _" ]9 b8 A7 S: F0 uborder:1px dashed #000; # L; j1 e8 ]. i6 f
} 1 p* m* K( G5 {- B! Y5 J7 A4 c
-->
/ y" U2 u/ K. Z</style>
+ H) P) K$ o( H( a8 t1 z P</head>
- t3 q7 G9 t5 K1 K/ b; U<body> ) c7 d' ]+ A1 K; u
<div id="pic">
$ v5 ?0 j" b0 T. Y* n<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" ^7 h6 p, w2 _, Y: S4 x</div> 6 l2 a/ n8 M. q9 C: W
</body> ) ?" N! H7 V( X8 H
</html> ; i! n }! a$ ~) J) o$ `
4 X, ~. L) Q3 V9 ^4 X百分比适应:" X8 r1 j2 T# {0 o1 F3 h- M
以下是引用片段：2 T, h+ }; T7 I0 Q1 j0 n1 i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) h5 o0 ^3 K! M0 w* b<html xmlns="http://www.w3.org/1999/xhtml";>
$ r7 w2 J- x$ ]% a<head>
. p; u0 c. q$ g z* Y4 r2 `<meta http-equiv="Content-Type" c />
1 @( [# G* d M3 U2 s<title>css2.0 VS ie</title> + z. |' n6 P/ A" g& N0 e1 F
<style type="text/css">
2 [" Y& I# y6 C A7 A<!-- ' }( [+ l6 H: S/ a) ]0 A% ~$ W% O
body { + w" E+ y( a1 j6 I. g& b
font-size: 12px;
, F9 o* R4 v- D, O: N* Utext-align: center; 3 T# L6 B2 w; Y' z
margin: 0px; 4 F& d) k3 n& u7 u! c3 ?
padding: 0px;
6 ^5 t: b# W( R1 O1 v' f1 C}
3 M7 n! G1 r5 Y' g9 `, ?#pic{ + \; A) X$ }7 Y
margin:0 auto;
. z( \6 F/ O/ ~ width:800px; - V+ c4 t0 Y# u6 m" Q L5 l5 E' Q) Q
padding:0; % U9 [0 [3 {$ j0 [; ]; b% ]4 C5 y
border:1px solid #333;
' f2 B' j$ t4 r/ C/ f } ) }3 a# B9 M8 }1 V* u* s2 }1 Z
#pic img{ 6 r4 i J+ a+ g
max-width:780px; ~2 x% M; s3 |- U m4 F3 Y. X2 j
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); + h1 ^ Q4 d# r* w. d
border:1px dashed #000; 3 x" w: D3 {. z$ e
} 4 r6 d4 ~3 l* ?) f5 P
--> ' ? z' t+ t* t3 O% ~ J1 E
</style> 3 z% A/ _, m& ~' r; C5 k
</head>
- z+ @3 K" U2 o# w1 M0 A<body>
`2 A9 r7 C- g- ^% V<div id="pic">
' H$ j' m* I, M* i' m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 a M" ?- l7 s; J# u4 t
</div> 8 ~* a6 m3 n1 w! \" |$ k
</body>
- t4 i. |: j3 J. n9 T& }4 V, \- b</html> |
|
发表于 2007-12-8 14:55
| 