|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. i6 p0 A8 M' \& ?关键在于：max-width:780px;以及下面那行。
, p, V) b; y' h2 M. ?1 e0 d; ~. r固定像素适应:2 Q. x" H% t$ f
" N/ r3 a* D5 k8 G$ o
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> 以下是引用片段： z. j; L: F' k S3 g$ Y$ A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , M( l7 P4 P& s! P
<html xmlns="http://www.w3.org/1999/xhtml";>
) X0 P8 f3 c+ c<head> 9 h$ N8 {9 [1 B4 s4 }( J! T! r
<meta http-equiv="Content-Type" c /> : c2 C% D) S* C2 l+ m6 h# f3 l
<title>css2.0 VS ie</title>
) g7 H L, d& {5 J; O- W# d<style type="text/css"> + n5 a$ d8 h' z5 _) a/ K' l
<!-- 0 u) U" g/ n) ?0 G% |1 S# ^
body { - B! b' x$ T( A, I
font-size: 12px;
; ?' b# c7 z9 htext-align: center; - o% I2 b* M V. r0 a8 U
margin: 0px;
8 d9 a. e' h" g* opadding: 0px; 9 o' k2 Y1 f* L5 u$ }% b! B% |
}
( _- h5 Y7 N" I' O$ s+ c#pic{ ' ~' q- S1 I7 n6 X
margin:0 auto;
3 a9 F# d: s& `3 [ width:800px; / X& P0 q4 b& Y. z- G; d1 P
padding:0;
+ A6 X5 W, q& U3 R. @) u U1 i border:1px solid #333; ' ]; h" r9 s! I
}
3 r0 r, O+ ]: |#pic img{
: S8 ` T" G2 y( T max-width:780px;
5 u8 y# ?* o. @& ]7 M7 Kwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 U+ u) l) @0 Y
border:1px dashed #000; - y+ @* I7 E9 @% A2 ^
}
: f* E4 d* B* C# l4 [- r9 ?/ Z1 i--> $ S B/ {+ [0 \9 F5 @7 d& Q
</style> ; M7 Y h2 d* z% w' W% w$ b z6 R, J
</head> ( F+ n. [' v7 y8 e4 M( u
<body> 2 [$ u# V" r/ l& h! J Y$ f2 z/ S
<div id="pic">
- @5 Q5 U) Q) I0 n$ d<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % L& P* L: p! M/ i
</div> 5 \$ j$ v3 P$ f. r- e9 v
</body>
. a" N$ O6 N+ q# {8 t/ l V</html> 8 ^5 V9 U4 m) `' T" Y n
# P. K' B+ J, V: }
百分比适应:
9 T( k% f% N) \* R* X7 t6 }7 H3 I以下是引用片段：
G+ e( ?. r5 ]8 c0 n& b/ `- B! _<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + e8 p& ^. H$ o: U
<html xmlns="http://www.w3.org/1999/xhtml";>
3 B6 n% O% M3 b$ Q<head>
7 b6 k: \7 Z6 f w. D; V0 u) I) ]+ i1 o<meta http-equiv="Content-Type" c /> 6 ~8 a2 ~6 J o1 [' @( V
<title>css2.0 VS ie</title> ! H) o, Q* ^6 t! }8 L' O% \& `6 Z- Y
<style type="text/css">
7 L, z0 y$ i5 P: H<!--
% S+ Q) @+ A" O( N$ Q% Dbody {
6 J$ e4 ~0 R9 L1 I9 Dfont-size: 12px; 4 d" n, T1 a) n T7 \/ m- w/ |: v! k
text-align: center;
3 ~+ w) i$ H. a8 Kmargin: 0px;
3 k2 X; f+ s1 \padding: 0px; ! j6 b* x* J2 y2 k& |7 x$ z
}
, u9 H9 ~0 P, U#pic{
# F0 G e# ^2 M! U# X! W% f& X margin:0 auto; # ?7 K' b& P" ^# E7 {. Z
width:800px;
) `! `/ D: d& b padding:0;
$ e% n. i l( B: [4 G% Y. r( [ border:1px solid #333; 4 |/ \/ d& G$ {; k
} - s3 D7 v' B m( t s d+ G7 d
#pic img{ 1 c* }* t" D% K0 e' G
max-width:780px; # B* I% T" y4 B Y" q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ }$ }- D" x% N# D" f/ Tborder:1px dashed #000;
. h, [% H* B4 ~2 @' h# b}
7 I! w ]1 H# u+ n% N; t2 h-->
) [ N8 |+ N/ I0 e% `; y. U</style>
9 K0 S$ R5 N6 t" v6 V9 l</head> $ g: Y- q- M3 }( i$ j- j; ]
<body> ) R3 M8 _3 S3 p* Z3 F: j
<div id="pic"> # K& O& P( i. H; S5 M, B: `8 O) S
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% Y" j$ u, O9 p5 i+ ?$ s</div>
3 x3 C, H! z9 r* ], n) R/ F1 J</body> ; W3 Y* W" V+ j; V6 |- r
</html> |
|
发表于 2007-12-8 14:55
| 