|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14427
- 金币
- 2499
- 威望
- 1647
- 贡献
- 1447
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% M) g' d6 B9 N
关键在于：max-width:780px;以及下面那行。$ M t# c! d5 a/ ?
固定像素适应:
2 `4 Y) K1 G- \7 m2 b, K7 k
/ T! i6 M1 Y5 N( `0 y* cdotted; 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> 以下是引用片段：
( D. ]5 J2 t; G2 o, L; \$ R$ `. p1 @+ m<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " @, q6 e; v8 v" F2 r/ i/ @8 z+ k9 H
<html xmlns="http://www.w3.org/1999/xhtml";>
5 W* G5 G! Y1 r% u* N2 b( M: B<head> 5 Y1 c6 {6 Z9 o, d- I4 h
<meta http-equiv="Content-Type" c /> 9 I9 }0 Y' U! @8 E; f% H
<title>css2.0 VS ie</title>
& s2 {6 L% o# h0 Z% l<style type="text/css">
% u/ |0 Z( e* Y<!--
' @; e9 u+ J) [% m& V. z H! `body { . H9 e/ W9 u, j
font-size: 12px; / Y4 B- R6 B, g5 f b
text-align: center;
' }) p* T' n3 d5 @4 ymargin: 0px;
, Z" v& J d/ _& Rpadding: 0px;
, L/ A5 l+ U% \# H, C}
7 C! I! Y6 V' I$ V+ v#pic{
8 h+ a: I# N' \ margin:0 auto;
8 A* y" P1 a# O. M6 M6 A; } width:800px; E1 F2 x2 Z: o
padding:0; P1 C& ~8 ~7 @% r3 q) `
border:1px solid #333; 9 S5 ?/ r$ a; O
}
4 w- M0 S8 l5 x% l# ]' `$ |) B" L#pic img{ " K8 B. l7 z9 q- X1 Y" ?% C, ~
max-width:780px; $ H1 J% o5 x% r5 U
width:expression(document.body.clientWidth > 780? "780px": "auto" ); % D8 [$ m9 M# H q
border:1px dashed #000;
3 u; S- {- {! \4 W; n& T2 d}
3 t9 P" M) O% Z, C6 U) i-->
4 n! ]6 X" x4 |% a. |! G; S</style> % W6 A/ v9 b6 U
</head>
, q) i1 e4 K3 }+ P<body>
* `) r; e+ @ A2 F, H7 P5 l<div id="pic"> 7 z) y5 q% g, ^3 x
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 ~( c5 H" K# d* b: p$ w
</div> / E9 q/ }1 h. L/ O
</body>
- c, S6 D/ N! `5 ]1 v</html> $ w' V6 A, A1 J& i, m* `" Z
- i; K. c0 w1 `" {3 V百分比适应:
' ? a! `; E& G( e0 d以下是引用片段：8 U6 b0 S! u8 i" T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , C K6 l: Z0 ~$ U
<html xmlns="http://www.w3.org/1999/xhtml";>
& o0 R+ E. U4 Q& _ [% f<head>
0 J# U9 @3 x; _) Z, o<meta http-equiv="Content-Type" c />
' a; J! ?8 b9 A! Z$ p6 e<title>css2.0 VS ie</title>
' S4 ?" D! f3 n+ b<style type="text/css"> - I! Y& G: b# M, k. n4 r }
<!--
$ m- U! ~# ^6 N+ p* { }body { 4 w+ C1 }) Y) b% h2 _5 J' I
font-size: 12px;
: ~- h* R2 P: Y6 P! b1 X2 A6 dtext-align: center; 0 g/ q0 m& g) _" \+ y! l
margin: 0px;
% A0 ?; s2 }) _- kpadding: 0px; ! s0 H h( I* L9 x- ?& E9 H
}
G% f7 ^9 m) B6 B$ f#pic{
. M. l1 b/ K1 M5 _ margin:0 auto; T( n4 C- H" ~
width:800px;
5 K+ L4 S" d) W4 B9 c/ q0 x, a padding:0; ) d+ g' E9 }; t
border:1px solid #333;
/ L( b. d3 y4 v } $ c' `* X: X) d% d* h' R
#pic img{ ! |$ s6 W: J, |; j) K( ^7 }
max-width:780px;
- Y$ f* a% B: ?* x/ _width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 9 {8 u G, C9 V/ z5 d
border:1px dashed #000; 1 N: F) @5 p1 A% N$ z6 B' B/ s3 i7 X. S
}
' I/ Z+ [0 f$ z- x--> 4 N& H3 h& o# Y: b* Q
</style> 9 u2 h+ `$ r/ E" {8 Y
</head>
9 g/ A1 x+ k( f0 C1 T<body>
3 w% l9 X1 m; ?3 k$ y1 [9 L<div id="pic"> 1 e! v' }8 ~1 E* U- J+ g' R9 X% l4 S
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( E3 |; \2 c# U3 h0 r</div> 0 O8 d7 o- l$ b
</body> ) R( D5 t4 n d
</html> |
|
发表于 2007-12-8 14:55
| 