|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。' |( {: V* s3 W* b, B) q
关键在于：max-width:780px;以及下面那行。; A( r6 J' u, y9 E2 M' X
固定像素适应:! v9 G8 z/ n( x+ O" F
. p' H0 ^" A& G. u3 f
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> 以下是引用片段：
% [5 ?- z! X: d+ }' j' T+ O- A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 u+ w. Y$ b8 o- O
<html xmlns="http://www.w3.org/1999/xhtml";> . a( y$ N6 I/ {: v4 z
<head> * L: d" p# I. P/ T
<meta http-equiv="Content-Type" c />
o4 Y3 Y! u0 S6 G/ p1 k3 P3 [% W<title>css2.0 VS ie</title> 2 a4 @+ ]0 I1 z; E
<style type="text/css">
( }9 ~" U3 e! D<!--
/ B- h8 E+ G: b/ X# x- @body { % {% F D" D6 ?
font-size: 12px;
+ D3 q8 u* _6 ?# J, vtext-align: center;
E7 i3 W" Y) Y2 G' }; Y: Cmargin: 0px;
e: x3 v0 Q! V1 R) Opadding: 0px; 6 \7 i, @" b; a2 r7 T& n# {/ K( h- c/ v! x
} B5 z4 J8 {$ [( j' ]
#pic{
5 @% Q2 [$ y! A8 s/ p7 P margin:0 auto;
& R" e1 l' V5 l; U2 I. T width:800px; 8 n9 d( y7 k6 f: g, L
padding:0; $ D+ h% Z$ R9 w) s$ B+ P
border:1px solid #333;
0 @. ~, w0 j' O; w4 N7 N+ N# M) X- o' ^ } 1 L2 w" n9 |. }" N1 f
#pic img{ 6 S' `# X1 Q( H# e' u- {
max-width:780px;
: W8 o% s; Y$ \& A$ t7 twidth:expression(document.body.clientWidth > 780? "780px": "auto" );
8 k2 v+ {- f6 q6 o! J- jborder:1px dashed #000; % Q+ h0 B1 m& j$ ^8 m
}
/ r- D$ e2 D U$ ~" r: o/ e0 O-->
V3 e+ n8 R" O% l4 \</style> 3 x" M5 M T w% `7 I5 w
</head>
/ c* D1 e, K7 L$ O<body>
. ?/ ]0 v9 T+ u; j$ u$ W$ H* N+ ?<div id="pic"> " U5 h5 a2 A: T0 A) Z0 g
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * c" U2 p3 ^. W
</div> ! S- u7 \# Z( o3 T
</body> * X X" B1 i: E
</html>
" i0 a+ d! J* K V2 T# f8 ]+ m( \; T) |0 V
百分比适应:+ ~9 Y0 \& A9 ~7 ^; ]. h0 N
以下是引用片段：# y) j# e" Z5 [5 [9 h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
p3 {6 r8 m$ v2 \2 \# J0 _/ t<html xmlns="http://www.w3.org/1999/xhtml";>
) [; O0 ~0 g( k3 F<head> ( M% s" m. m3 Q$ h" `+ P
<meta http-equiv="Content-Type" c />
, E3 H" T9 T y8 F6 i" @<title>css2.0 VS ie</title> 4 A: o2 E3 O5 M; n$ L; ]
<style type="text/css"> / i, n ?4 w& b; R% @% d- I% K
<!--
/ M5 M! ^ w. v) M2 a! m# ]body { + e1 ]4 s0 i( Q' F7 k
font-size: 12px; 0 K4 S; `# L7 f( z1 ^9 }2 k) @# `
text-align: center;
5 R1 \% b! i wmargin: 0px;
3 D. @# p" s( Spadding: 0px; 6 t: q, A. v; x9 o
} $ U2 G( S1 ^ I
#pic{
; q. S! X: M7 i+ R: F margin:0 auto;
8 G- K' @8 b# y: d: v& I width:800px; / b- G3 L1 _3 ^6 j% ^3 R+ Q; w# w! M
padding:0; 2 Q' R/ r+ A$ {8 Q0 F: d, T& s
border:1px solid #333; + [/ {1 _! b4 h9 J' |
} * e" @% ~( @. }4 e$ R' W% r' E
#pic img{ ( X4 K5 @% n8 x, z3 M, ~
max-width:780px; 4 Q% o2 n$ h$ V
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 S" `4 a8 Z6 n& d, qborder:1px dashed #000;
, @$ s" p3 |$ G: N}
. M; ~; O7 \% }$ |8 C-->
2 _4 {; s7 O1 j; Q# o% w. i</style> ! J2 ?. h4 \! z3 W# l: h$ u& A' _
</head> , n$ j1 C. g) n5 n i
<body>
( \6 r% @5 K1 ^<div id="pic">
4 D6 Q) e$ h& n2 S<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 Z ` q3 \7 R' _ c6 _6 t
</div> 2 C/ C4 b( X1 l0 J: `3 C
</body>
1 [. u+ J" _5 Z9 u</html> |
|
发表于 2007-12-8 14:55
| 