|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14393
- 金币
- 2482
- 威望
- 1647
- 贡献
- 1430
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。$ ~( p8 r! ^ I. i* {0 _
关键在于：max-width:780px;以及下面那行。7 R1 @7 x- y6 H
固定像素适应:! I1 z2 O9 c. I& N% W" j
% J9 T' u) K& C! Y( I: v+ H
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> 以下是引用片段：- W2 B4 k# f2 H) V3 k" q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 ~$ r6 F- f3 ]+ Y
<html xmlns="http://www.w3.org/1999/xhtml";> / b" v4 U& B; S7 p
<head> # ]! W# [- Q$ |7 Y0 m( G. b
<meta http-equiv="Content-Type" c />
' q5 F' _! u3 _<title>css2.0 VS ie</title>
) ?5 E4 D$ _* ]<style type="text/css">
9 d0 J2 G, S, Y9 d- [<!-- - ?! t' p9 M9 n; H
body { * D' \1 Y7 k8 i7 e. R: o; v
font-size: 12px; - D8 \$ R; ?/ m
text-align: center;
_( h/ z. q. i! v5 \margin: 0px;
4 M. j- F: h% l' ]& L8 U5 t# y, mpadding: 0px;
6 W; J; e/ Z2 Y0 ~1 M* r0 ~}
+ s7 b8 r" i1 x, [#pic{ ) \: B7 ?' Y! A q- c- ~# n* Z
margin:0 auto; ' d u1 u; S( _) M2 _- y
width:800px; ! ~+ z0 _5 K7 d& C
padding:0; 7 g8 m7 J4 Z0 L8 A8 `* G: s
border:1px solid #333; b& e. e8 b* K/ e+ @" f& [$ j2 U
} 1 r4 f6 c2 y9 D/ U
#pic img{
. {8 k8 Y k/ I5 m1 A max-width:780px; , T7 J, h, k" n) J+ y" g
width:expression(document.body.clientWidth > 780? "780px": "auto" ); - m) |3 g7 Y8 F4 \7 ?( r) ~ W, C- J
border:1px dashed #000; & f: b1 d- Y3 M$ f5 Y
}
* N [% t _4 I& j9 B4 N-->
: \( E. @8 l* Z9 }' Y</style>
- g4 j! z8 T3 F+ W' c& ?</head>
- Y3 N! f! h* ?<body>
! N+ J% {2 m. ]: s. ~<div id="pic"> 3 P& B5 i" c# [
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 K1 L4 h; u o8 d5 t</div> , K' K# G0 L) C1 S1 a- g! f/ C
</body>
5 w0 R/ Q! v: f) Z0 N' f</html> 0 ]' h3 s, S$ F& o: Q' S2 I
- d/ M6 \2 `1 s; i+ f5 H百分比适应:" F, G# r" j+ q t. S6 i
以下是引用片段：6 M9 j9 ]7 l; [. U$ ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, u" R E9 R! x# Q e( T<html xmlns="http://www.w3.org/1999/xhtml";> 1 `3 ~% s0 p% i9 X' Z5 x/ X/ P+ z
<head>
' D# k5 e: i) v8 c0 c9 g<meta http-equiv="Content-Type" c />
8 z* F8 o& U& U; @7 z<title>css2.0 VS ie</title>
- B) Z; C5 m0 y, P/ @ o<style type="text/css">
: Q0 i/ F6 H$ v- E$ L<!--
( {6 e% h% l' F5 w$ Fbody {
& C* D, X$ U# O* m8 {! B. kfont-size: 12px;
7 j0 h: x1 o8 O: W otext-align: center;
c' I7 b! `& @- [% T8 O7 Jmargin: 0px;
* ]0 ?) C1 `5 T5 Kpadding: 0px; 5 I; X& Q8 S; W3 P7 w
} ' a3 b9 }9 o4 E' {
#pic{
$ w/ ]7 m) ?; S& @. p. ] margin:0 auto; 7 G" q7 L! |7 o. Z7 z
width:800px; ; u) ~$ }; g9 ~/ ^- W
padding:0;
. e: v4 b0 N, ?! ^ border:1px solid #333; ! H& @8 B) b/ M! Z6 O) m
}
4 c% X( L1 K( Z) Z#pic img{ c4 k& A! C1 T2 s, C
max-width:780px;
7 [) Z; q R8 v9 e; L' F, e0 v; Uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); S0 _, x6 y8 v3 J6 m X
border:1px dashed #000; ' E, s& v( X& o8 k m( P3 a
} 9 _- W& @6 I5 U0 U' D: U- F
-->
2 i! p4 e, @+ a+ Y: G- a! w: b' a</style> : h$ ]9 f4 X# x2 ]1 Z
</head> 1 g X* l" w0 E, d( W% L7 r9 ~8 K ~
<body>
/ k) I. ]4 g: E" N2 N<div id="pic"> * l8 C4 x6 d6 N {$ z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 ?$ w$ E# y$ y8 _% E- K% e3 F( W
</div>
/ E+ Y& U4 _* ^6 T3 n- p2 X</body>
% @( P: d9 J. V! o x</html> |
|
发表于 2007-12-8 14:55
| 