|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 n% \" ?" r0 r: b3 s+ ~- L: t
关键在于：max-width:780px;以及下面那行。
6 J% ~5 q1 s6 V" g固定像素适应:* r; J; v2 I5 `( k# @% v
# I; X( A8 A( W; u9 H; C0 H! Z6 }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> 以下是引用片段：3 w, l5 l0 d0 n* [1 I$ U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / M: d$ E; I* _! ?6 I
<html xmlns="http://www.w3.org/1999/xhtml";> ' a y3 h @8 s( m
<head>
+ m* ^% I8 P1 }; m& m! Z$ B<meta http-equiv="Content-Type" c /> + w g9 c" p0 f; c
<title>css2.0 VS ie</title> . x! H+ c& J8 O2 ?! x8 a
<style type="text/css"> ! e6 Y9 N& B( h8 k5 {
<!-- $ ^/ t9 \- u- y
body {
4 ~3 o) O: m9 I# f1 x5 t( Z' M/ vfont-size: 12px; 2 K" ^& M; u( }0 Q+ g! ~- l2 ~
text-align: center; ' z. p; w% P. T' J$ U% u
margin: 0px;
4 h$ ^3 D$ y/ q$ hpadding: 0px;
3 k( N6 C% i. Z3 Q} 7 Z: g m1 ]( K) R( ?7 R
#pic{ ) t" i4 A2 T% `3 m* O$ z
margin:0 auto;
! ]* k5 Z/ r! u0 G! o- u width:800px; 9 @8 j8 W9 q5 {% m3 B0 ]# z8 Q
padding:0;
3 F; ?* ~2 k! q) c5 h' u; y* m border:1px solid #333; . @: U" w+ L+ S2 {8 J' g! f
}
% |% n4 ]( L$ F/ X0 _#pic img{ 0 \: X( I1 b- Z3 @& t$ O
max-width:780px;
& d' ?+ F" _0 ywidth:expression(document.body.clientWidth > 780? "780px": "auto" );
- c( R$ a2 } }border:1px dashed #000;
( b7 q$ U' ^. J3 g) V} / b+ M3 I i/ i0 B0 ^5 m( |! r
--> * a# l' C. Z. T1 d2 r5 G
</style>
5 a% z3 `" L% D8 X; F7 _4 w</head> ( w, L; L+ B: O% \
<body> g% e( B. l& E" [) k( b* ^$ G7 @; V
<div id="pic"> 2 J( J6 w7 v5 k; G
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % G3 ?' ?6 q( R8 ^+ O+ l& l; A
</div>
6 R0 ~7 K& p& q. _; k" `& p</body>
. K2 \5 }+ N8 O8 F4 I. b( h</html> + u( j) l0 [! M4 l* m8 n
9 R4 |/ A, Z5 o) P' n" b, H百分比适应:
- @3 j( k- U9 z% R) f4 l4 K9 u以下是引用片段：
' @9 P6 l& p2 y& z- b% V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; C2 Q' y" W7 d. E3 E
<html xmlns="http://www.w3.org/1999/xhtml";>
0 L: N: C+ q. u/ x7 N<head>
/ q4 K9 j! r$ |* ]<meta http-equiv="Content-Type" c /> 6 _+ Z& j% r& I! p0 r
<title>css2.0 VS ie</title>
' T# {3 p. P9 J, [* S/ i<style type="text/css">
% L) K6 u7 i( w! S; G4 a4 E6 `<!--
# M- q* E% S& p( p5 l& v! pbody { # d) s6 w3 D" S/ N) c
font-size: 12px;
1 _& s5 h. C- J1 c/ Ltext-align: center; 5 ?' E! O; |. S: b- @) K5 L7 ^
margin: 0px; $ X& q9 q. m/ v7 A; n6 ^
padding: 0px; 1 n. e2 B6 p. W, m1 k2 L
}
+ p8 {+ Z2 ]1 b5 n#pic{
" |! R! D1 j7 o3 W margin:0 auto;
0 ]4 F2 o$ F/ S4 V width:800px; 4 L6 F4 {2 R; g7 ]$ I9 f: ~! i: p* o. z
padding:0; 5 `# t+ {, `" f3 v- O! _- E+ \. v
border:1px solid #333;
2 m/ R2 y' ?& }: I" T } / m3 r4 r. S% p
#pic img{ $ T7 L$ s" j/ K: b" V
max-width:780px;
5 x6 f) c) b7 Z6 Q4 y2 c9 ?) q* v$ Fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 T9 f$ l& ^; {* s* K& O) cborder:1px dashed #000; % z0 E7 H% u9 b2 Q1 M3 \! w( s& u
} 3 s+ _1 |* T# B$ |+ e/ Q; L X3 y* F
-->
* v) p$ {) }# c7 L</style> 8 R* s9 {7 I, O h7 G
</head>
! l' g8 t8 H& e. R; U; p<body>
& H$ b& A& k! V<div id="pic">
' s) s! U/ i. P+ a. J& ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 A e' i7 [ n
</div> ! t0 F: N! T) f/ A+ E* E1 i( T4 E$ ?
</body> : \: U; ?( ]" f; F3 w7 G
</html> |
|
发表于 2007-12-8 14:55
| 