|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14353
- 金币
- 2462
- 威望
- 1647
- 贡献
- 1410
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& L/ }& ^, P' q4 K, A3 l1 s关键在于：max-width:780px;以及下面那行。4 w( d9 x1 U6 n/ ]
固定像素适应:/ b% h" ]; S9 x0 u
! _" n7 B# u- G5 Z- edotted; 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> 以下是引用片段：
) q" w( r8 e7 E- v$ I. o7 D<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / _8 }) n7 |) o
<html xmlns="http://www.w3.org/1999/xhtml";> , s7 `7 a5 ~2 V. ?; r1 N
<head> 7 @1 Q/ T |! n- R
<meta http-equiv="Content-Type" c /> # j2 U7 V) ]# ]( B) Y7 z q
<title>css2.0 VS ie</title> 9 o" ^/ x& c0 [; i
<style type="text/css">
) ]' }9 }- F' M<!-- % a5 c1 [7 N' Z/ n$ j4 ^! j O% h
body {
- `- y0 q( @& Hfont-size: 12px; 2 G: E d( ~! N, i$ I+ C
text-align: center; / U4 n3 k/ v5 v, P* O3 @3 M
margin: 0px; + a( p. R, ]' w4 d
padding: 0px;
7 J2 g' G( ^' O3 `# ~6 |8 s}
# k2 T' R- P7 a#pic{ 5 R0 v/ d" B5 s }" o' s
margin:0 auto;
" y7 A& [: h0 e' t, a" C8 T0 b! y width:800px;
1 j2 t% U' C+ s padding:0;
4 K6 R* R- c" e( }& \' S: ^ border:1px solid #333; a& h& D, e. z5 X, @$ D0 v
}
+ m8 K' U2 `+ _ u#pic img{
; L6 `+ B5 |* B$ a5 @6 F max-width:780px; ; P& J3 z, u7 ^9 U3 {' r" U5 [
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 1 t& T' c5 V0 L
border:1px dashed #000;
7 |9 a7 c+ d) } c7 p: T" q} ' ?7 Y( A, {3 }4 M0 m
--> 0 z! ^$ c1 ]2 L. X% U
</style> 7 O; ] ]6 h9 G/ [: s3 h& q7 H6 Q
</head> " b' E" I$ s) u& e
<body>
5 m2 w0 V/ t( d2 W( v* r N<div id="pic"> : ^/ n. m8 A! ?# w: r
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' N- g5 ?* W7 }& K- h" |</div> . _6 Z( o1 J6 v, N q: P6 j2 V+ n
</body>
( G% v# d1 Y! s- D- g7 n</html>
) w, l, B7 H; h
9 H- ^, a4 ^6 k1 J: g) n百分比适应:
+ V* P! p/ y. ]$ v2 t以下是引用片段：
& f! E: o6 i. k: U4 \0 z1 ]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( T3 L4 x3 |' H1 [8 x5 W<html xmlns="http://www.w3.org/1999/xhtml";> T. {3 {; ?. e6 f0 i6 w! C" G
<head> 2 [* j7 r9 q- u
<meta http-equiv="Content-Type" c /> 4 h$ b2 k! o: |3 |/ L0 T0 J- ]% r
<title>css2.0 VS ie</title> 1 {( o4 F5 s' `2 Q5 m& f
<style type="text/css">
* p" T: c- G! Q! m3 b1 v! z<!-- ( X+ s, G {; q
body { . C% o3 H/ Y: n3 J3 Y
font-size: 12px;
2 g& F! m* y$ l8 L6 etext-align: center;
1 S# N. I: x, B/ pmargin: 0px;
1 I, c5 Y% {+ Hpadding: 0px;
( E. y0 ], S5 }" x" a0 Z- ^6 S}
+ ?6 n, E7 H& S; k# P7 V#pic{
0 k7 l5 ], [: [" r" P0 u margin:0 auto; 0 E( j2 n& f w/ B8 P
width:800px;
4 H( o7 y, K$ _4 d# Q padding:0;
& W$ x: S( Y7 S border:1px solid #333;
2 x5 P: M$ R/ _& z. S& P& J2 U } ' O0 R" B5 l: L1 v4 }( Y
#pic img{ 7 g( j6 g$ u& L6 `! d
max-width:780px; - d6 N7 S" r5 l4 L5 E8 ^
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# y0 e0 ~- r6 j2 wborder:1px dashed #000; 2 N1 n: s5 t1 T1 B0 M( R( {
} % o" ?: h% {# @2 b7 ?
--> % o+ |5 |' ]- y- R" V2 X! k
</style>
* e- M! r. \5 q# f( M7 \5 {$ k</head>
: n' r0 Y+ H, x3 d- Q8 O3 `<body> * l- t& F9 J' J! O+ w3 p3 Z
<div id="pic">
" y; V7 Z: r/ D) L3 b4 E1 O7 j3 u' x<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 o. y/ y6 O4 B</div>
3 s( u8 _* @: l! C) o</body> - Y) M; B; e7 ^
</html> |
|
发表于 2007-12-8 14:55
| 