|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 @* A7 M( O4 B4 o关键在于：max-width:780px;以及下面那行。" ?* N! N/ _; m* H% v# o' T
固定像素适应:
" E* Q# `- j$ R" z5 p) w; D% y
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> 以下是引用片段：% A5 d) H) x# @/ R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> & t8 Q7 v8 N! G+ w0 Q
<html xmlns="http://www.w3.org/1999/xhtml";>
+ x P/ H4 c- X+ `3 u8 v, [<head>
& Z+ c8 F7 _3 u<meta http-equiv="Content-Type" c /> ( t+ _* g& K! b- [- I
<title>css2.0 VS ie</title>
6 m4 @$ Y8 B/ t9 y" z<style type="text/css">
' d8 D: {' m* N. P<!-- . N+ q4 ~- u w/ j2 ]+ m; J# q
body {
. s/ p& k8 |5 X3 I2 M/ \+ hfont-size: 12px;
2 e0 g% X/ |( xtext-align: center; W& W& A. }: r6 V2 I$ D( x: }& q9 b
margin: 0px; - ^: N& a; c; T8 c9 `' y0 k
padding: 0px; + s( t3 s% ^$ a! |. C, D( g0 q
}
( }& z) [/ `( T9 m5 G9 q' u#pic{ & b6 \! \; P+ ~
margin:0 auto; 4 O8 Y* d: j4 s+ M+ I2 g
width:800px;
3 T( F$ }9 Y% q padding:0; 7 r+ y9 B6 e6 H( p
border:1px solid #333; - q$ v3 X3 G/ M
}
( h: K9 ^8 N& r/ D" I#pic img{ - h0 F. n. F/ m+ T
max-width:780px; + k/ C: A' p7 t0 o& m4 _
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' {3 I8 i# v0 x5 c \8 N5 fborder:1px dashed #000; 1 Z) |" N) J7 n/ J4 \+ z# f7 x/ Z
}
" k8 p0 L+ p7 P H) [# f0 b+ l! }- [--> ' n }' q0 F- Q1 i2 e
</style>
$ \9 s9 ^+ ~+ \9 c6 ~</head>
2 ~, a& V7 y3 E. S, ?0 @5 ]4 I<body> ! H9 W9 P% r: G/ e
<div id="pic">
) Z0 `1 y* e- j& w4 `1 F/ U<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 [+ | Y- I$ p2 t) ?
</div>
6 ]2 B" m7 z) w5 ^- ]+ j0 J</body> ~! F( J+ d. k \
</html>
& u+ n5 _% o9 S4 j, z9 @5 g" a2 c+ M4 r
百分比适应:7 d: A1 l, @- H; z, q" |
以下是引用片段：+ ^5 R' h$ D- z% V1 V! u4 x, ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( z! a7 d% O/ Q! y1 F) A8 M<html xmlns="http://www.w3.org/1999/xhtml";>
+ y# L0 k" d" U' Y: z! A<head>
$ k, J, a& f; K) B( ~' ]$ L9 C<meta http-equiv="Content-Type" c /> 2 P& k+ B5 o! X% M
<title>css2.0 VS ie</title> " b2 e3 a' f$ t1 M4 C: U
<style type="text/css">
8 u0 x7 u/ j4 L, F1 I c4 _<!-- + } G) e5 v3 m; I; M
body { 4 |7 b8 B& N# b4 @$ e
font-size: 12px;
+ e8 k g0 v3 Xtext-align: center;
( G) s4 b, z$ z3 L4 l2 z. Omargin: 0px; 5 Y% s1 i: p' x' v
padding: 0px;
- [" Z6 F- K u" z! ~}
8 t: J3 `' P! V5 J#pic{ 1 T& _4 m# r9 @6 C
margin:0 auto;
1 S( K7 T, q0 [8 D width:800px; " n% T+ Z3 U" `* ]0 }
padding:0; [/ q2 e1 }. I" N, l
border:1px solid #333; 8 I6 y" g% f8 C. G
}
# ^( z+ d' e8 o/ [2 @#pic img{ ' M0 l5 V( \' l! z& r9 v# g8 W
max-width:780px;
1 M" Y( d% k% E& v ^% ^4 G8 cwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 9 K0 o; r* v7 f; c" w
border:1px dashed #000; 9 ]8 G- M) v. `, ~+ A. r/ ?+ H0 w
} ) q O+ W+ X* A y
-->
5 _5 f8 y5 V9 g) ^</style> : u" p1 r: X* c
</head> v4 m0 z/ E! r) X
<body>
' ^' y4 `" f+ M, W<div id="pic"> $ m2 J( g( \0 r' \4 J. v
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ g2 X3 v. C3 R5 y: C N7 D
</div> 2 @% _2 h! q! S. M( \$ j- j0 }
</body> # a' o0 Y+ E9 p0 J5 X
</html> |
|
发表于 2007-12-8 14:55
| 