|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14325
- 金币
- 2448
- 威望
- 1647
- 贡献
- 1396
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* `3 H# n U+ T1 Y9 D V
关键在于：max-width:780px;以及下面那行。! f/ Q$ m) b+ Q. s) s
固定像素适应:4 n) E/ Y& ^% ] n# M3 c
7 w' h6 K3 J) ]2 i" D: ]
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> 以下是引用片段：
) D3 M) O/ `2 N4 K0 x<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 X/ K3 T, {" r0 x
<html xmlns="http://www.w3.org/1999/xhtml";>
6 W4 N6 U# X% \5 w<head>
, o K0 _' B& b( E<meta http-equiv="Content-Type" c />
- A3 R) N" x0 c1 W. y U9 f% {<title>css2.0 VS ie</title>
* f1 P2 S7 q& E& O$ l" ], T<style type="text/css"> 4 E" m( n! W, s1 g8 o ~( [
<!-- 1 V% V' {+ U- k& J
body { % l: n3 w2 w% |
font-size: 12px;
T0 p8 [. s# D" ktext-align: center;
5 i5 |# X- N" l. H. Emargin: 0px;
3 B! C( b$ f* G. ~+ |! |! v c' mpadding: 0px; # K3 y; {3 `4 V: m
} ' b4 J9 d" Q3 L3 q
#pic{ " L9 L& a6 U. x; u7 `
margin:0 auto; 9 M9 @$ V& ?' e
width:800px; ! e7 R. l8 d' b! Y! ?( n
padding:0; * V/ J; S6 ?6 a+ P& ]4 @7 D
border:1px solid #333; ; \4 h; ~* ?/ |" C( R- Z t
}
1 ?$ k% z6 h* o8 t4 U+ F+ U2 N#pic img{ ( X, F. a: G* N# E- o8 i
max-width:780px; # g! B! n7 _" R1 q& A: c: T& s
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 V( I: `6 k" _& C. dborder:1px dashed #000;
, A3 V. R' X, l& e/ M6 B4 T} 8 U _( v& o _& L6 q- P) L
-->
' G9 T) z$ j& i) ]</style> 4 L( b8 }: M0 j7 z/ G
</head>
4 a$ d, ?) \( W, H<body> ; v# o n. s; v* k; k! S
<div id="pic"> ) I' T! X' a! U& y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* B0 S' }0 g; P- {1 ]</div> ' v# x, j+ T* K/ A9 J, @- f+ t
</body> " M' v" l3 p2 ^
</html> 8 c' z7 Y: t: r$ P" b
' j; M! U. X1 D4 [百分比适应:' E/ `, k) s n+ p3 p- ~
以下是引用片段：" L3 w% l* b+ b: _& P2 i* U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) I) L& j; ?) Q$ |$ B1 r<html xmlns="http://www.w3.org/1999/xhtml";>
7 \2 U# o* Y- R) H8 l' C, @<head> 1 v% D9 c2 p) h/ R! k5 b2 j% Z; ]
<meta http-equiv="Content-Type" c /> / G5 X. I3 ?7 i* |1 @ ~8 b& b
<title>css2.0 VS ie</title>
6 L8 I4 P3 S# s! }9 t* V6 v7 Q<style type="text/css">
( R) n5 \: W& `. r* j<!--
1 _2 l% y+ y: N5 k/ |body { 1 Y! ?: v r5 Q% W; x2 o4 h! u
font-size: 12px; 1 U' {0 E$ F% `2 @( H
text-align: center; 4 n8 e0 r* D- Z
margin: 0px;
2 p7 o) D, s/ e$ Spadding: 0px; $ _6 W$ v- H' o r& {* B5 X& I( `* D
} + K; L i P: S5 W8 R1 O
#pic{
; N& e0 I6 \. C' J, B8 ]" C* A margin:0 auto;
6 |6 a8 K9 Q) {* e. Q width:800px; % [% y% i# Z/ Q( Y
padding:0;
! U( z" F& ~6 ^. V0 g border:1px solid #333; 5 I+ t2 y& x R( ~* R+ F* t1 r% k% v
} & _8 S( t8 d7 v
#pic img{ & [+ S+ ^$ Q. N. l& }& P
max-width:780px;
' X* Y) H0 e6 M6 ?3 K) Ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- e% g# E2 Z8 V9 [% Cborder:1px dashed #000; ) I7 f$ g- M1 f1 T* l
} # P6 I: c" k5 r" V; k) P
-->
$ z* `/ p) g& I. Q3 {) ^2 b</style> 6 ^0 o9 N( n! P& f% } {$ k
</head>
7 D( B7 N, Z4 V% l! V+ b& B% O7 P<body>
4 E- O3 F& F8 n: W4 p9 I, R<div id="pic"> D, D; Y+ R) \" j0 W7 T: |
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 @' p' s3 g' d, X9 B) ^</div>
) R7 k3 d& s! j3 J; p8 S! L</body> * C3 z# U" i# Z" m: l1 F7 u9 |6 g1 B
</html> |
|
发表于 2007-12-8 14:55
| 