|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14353
- 金币
- 2462
- 威望
- 1647
- 贡献
- 1410
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: P0 M6 _# P7 d8 O9 q关键在于：max-width:780px;以及下面那行。6 l4 M$ E8 D5 X& X" ^
固定像素适应:& W, r; N Y$ T* W( U7 Q
4 M; i, i6 G d+ gdotted; 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> 以下是引用片段：
% K* `9 p0 L( P; @# e3 e<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 t4 M3 o4 Y# p4 \6 f<html xmlns="http://www.w3.org/1999/xhtml";>
& P3 E: A# }. N& o! v% O- o<head>
3 w0 x3 e+ k3 B<meta http-equiv="Content-Type" c />
6 `# T" Q; w+ r- S<title>css2.0 VS ie</title> ! {* B. f! I W) f- y; k
<style type="text/css">
+ r% i0 ]; f" S1 M<!-- 5 {7 \& o/ ~1 Q% t [# k5 l7 E& Y
body { 5 E4 B; e h% V0 m+ ?. L: l3 y x
font-size: 12px;
0 v: d+ B& \- ?- M; o0 w( V* {9 ?text-align: center; 3 _. {2 I7 [6 Y" y
margin: 0px;
- N! B# v2 u8 dpadding: 0px; 6 Q }' `+ q9 R/ Y
} : z! l& Q- t2 V8 F# {
#pic{ 3 s' ~# q G9 `
margin:0 auto; . C) K* s9 W' Y+ Q2 {- U
width:800px; , |, U$ {" h3 o: U* w
padding:0;
) F; C: z* D- j1 D( }1 p9 d border:1px solid #333; $ [" C0 s+ F* ^) T
}
& `, A8 a0 L f+ C#pic img{
# Y+ F' i/ k, P# ~. j* r/ a2 j max-width:780px; 7 v R8 U0 c9 k# d2 o: H/ O
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ _, f- Q+ ~' }$ M$ D% }4 `& r4 i2 Uborder:1px dashed #000; # w* H7 K; K S. ~
}
+ ]# V8 e% u: H9 z--> 7 _9 s+ A6 ?0 N( t- H& q5 o
</style>
6 [5 ]0 ]) r F" J</head>
" t- U$ A; ]6 |<body> 4 q* K, H E3 g3 Y# V- X
<div id="pic">
- o5 k% }2 J- D- c- N4 |* ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 H& o" k. E6 r1 C
</div>
+ A8 x3 e9 y& F3 U7 `</body> 5 g- T+ l. s* B4 o
</html>
! A; ^! Z. e8 j8 ]( g. v
( ~2 W+ b3 h2 T. f百分比适应:
8 D4 ?" \$ L% G1 F以下是引用片段：
+ v8 \/ U) [+ J) `+ U- T<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; I4 T& Q2 J0 ]2 B" W7 _
<html xmlns="http://www.w3.org/1999/xhtml";> 5 I- L& g* A+ T1 [1 l+ j, L: ]
<head> % ^: K. P4 M m3 h$ M( u# j" K
<meta http-equiv="Content-Type" c />
6 M- _6 x+ B* k( R( U2 @# s) C<title>css2.0 VS ie</title>
0 e4 K6 i/ F' D7 D i0 h7 ^4 T2 U( w<style type="text/css">
9 d: Q& y7 ]; R; A& j$ O<!--
' \% [. K$ E) o0 Bbody {
5 W/ X1 T( F0 F7 `6 a9 rfont-size: 12px;
+ ~. R& y# _2 P) o$ Z E' Ttext-align: center; ) i& v/ `. \6 g# z: Q1 t
margin: 0px;
, A: ?4 i, C8 ppadding: 0px;
) @% I) p2 o: F% f! w8 l0 @}
# z& M/ {8 I* a3 `6 X8 z$ x#pic{
; v' z2 u& V% m/ r8 g c margin:0 auto;
8 E) p, Z5 }$ m" H7 U) z width:800px; 8 U# N! [# Z2 `' B8 d8 Q
padding:0;
w/ |& d6 P( P" v, {- c/ p border:1px solid #333; $ r$ w( l5 j( H
}
# ?% o- s* v2 F- C% U0 t" U#pic img{ ) G0 y& p" F6 e+ S8 j @" y
max-width:780px;
$ U, l4 B, v8 g+ l$ T ~width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
U5 J6 m0 G; a- X- @border:1px dashed #000; # }( J* i& n2 Q( ^
} ; G+ A1 \ ~$ Z. ^2 r
--> ! g5 W0 _% F: g% t) L
</style> $ b8 ^3 A) S0 [% `2 F
</head> / T$ F, P3 y& ~$ \+ s. S3 ]
<body>
1 Y, b3 B4 }! G2 w2 c<div id="pic"> : G8 o. x% {* s9 m% r" l3 m
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ H2 M; Y8 ~3 c; T4 U</div>
& F% z! `3 L! P" `( S J; x+ u0 t8 I</body> & R6 N1 l& B& u7 T# w/ h, o, \" o
</html> |
|
发表于 2007-12-8 14:55
| 