|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14333
- 金币
- 2452
- 威望
- 1647
- 贡献
- 1400
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。7 p- G$ K4 B% U7 s0 y }
关键在于：max-width:780px;以及下面那行。
: I. v7 ~* t6 t1 ]固定像素适应:
& f& h6 l) x! s& e
- {; l3 _; P' x; Pdotted; 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> 以下是引用片段：4 b u, p9 K D$ r, B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 `' w) y, s1 g5 C$ _* Z% U1 Q
<html xmlns="http://www.w3.org/1999/xhtml";> ( A- \3 t' \6 ?
<head>
5 j) b6 ^+ J+ T6 M<meta http-equiv="Content-Type" c />
# {. ]- L8 a: H9 P) M( j6 ^. K<title>css2.0 VS ie</title> & a4 Z( y, D* L _9 v
<style type="text/css">
1 R, i) p6 @6 {<!--
8 `1 k- S! v! n' N3 o, Sbody {
& ~! y$ E9 {/ Xfont-size: 12px;
1 n! s( y7 \1 L ?' btext-align: center; L+ L( E* f6 V3 j
margin: 0px;
& R, O, o s& p- M" t* Y0 i6 Ipadding: 0px;
+ R( {. k, v" ]8 g5 d; [}
7 f1 P/ i7 m ^, _( G% M3 H4 `#pic{ & m+ x6 ?* Q- P& \& U$ c' D8 M/ r- M
margin:0 auto; , Y; x) ^+ }9 W, T+ f. L
width:800px;
, S j1 x- s5 {7 t9 c& g+ a/ g2 ` padding:0; & |( P" T) c C/ g0 [8 t
border:1px solid #333; % i+ }! I& F$ T6 Z
} 3 I% h$ H" x$ Y, ~7 o0 O
#pic img{ # K) q) R2 q- V
max-width:780px; 5 s: O: g- E( f
width:expression(document.body.clientWidth > 780? "780px": "auto" );
9 n9 F% N7 [8 B; C$ rborder:1px dashed #000;
# Z* ]3 }% r& n1 @} " s3 {- Q3 ~8 _: f1 C
-->
# q, H/ n* x7 Q5 o# J% W</style> + L( ^( ^* w- Q2 o# }- G# n) v& F
</head> # V7 Z! S- c2 v: N5 Z6 f8 Q
<body>
2 q" _5 v5 C# u) q<div id="pic"> / ]8 ~' R; k, r i$ H
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" Z! F7 w8 V3 \) T: X2 h' i3 {</div> 0 J! g/ @! n" t
</body> # w5 o7 h* W. g
</html>
H7 x* }1 x1 |: x9 p% v/ u0 z% X
8 f, Q# S* e0 ~4 }& b. m* m百分比适应:
+ n9 B7 H1 U% }以下是引用片段：* W$ w; |2 T) f- }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 @, V- P+ O* X+ a! b<html xmlns="http://www.w3.org/1999/xhtml";> 3 z/ ~% ~( d9 m: t. D2 T3 d
<head>
# a8 u$ f8 F* N- B7 e<meta http-equiv="Content-Type" c /> # N9 r n0 [2 Q/ s6 c* B
<title>css2.0 VS ie</title>
- p" C) ~9 a: f) F2 P2 z7 y) I<style type="text/css"> 5 S% I" m; c1 E5 M, m6 b
<!--
1 J: h0 e5 s! W5 qbody { 4 g! D V0 l1 F
font-size: 12px;
4 z( a/ d1 ~* i5 Q, P& _- z/ ltext-align: center;
$ K- F( r5 v/ S& ^7 Q9 e. D& } Pmargin: 0px;
# ], g% t: T" U! }. zpadding: 0px;
/ a2 u, a0 V' F+ W/ `: H) R}
/ o! D3 _! E% W#pic{
( E, |+ }- S' G: ~ margin:0 auto; . M& x( r" Q$ H, O0 z% x
width:800px;
* ]" W1 h7 `" u: a7 S& z: ^- Z padding:0; 2 s% Z2 S% x+ T9 y, ~
border:1px solid #333; , ]. F* _% G7 u p8 I$ I
} 4 k+ w7 c$ z$ G1 ~+ }/ t3 a
#pic img{ + v" r( ~" l% h
max-width:780px; ' ^; x0 X9 A4 ~3 m$ E- y0 e: u
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); - P) z! ^( K+ I. x* A
border:1px dashed #000;
; B6 h) H+ S' |1 @4 R} 5 M9 Y) r1 p) c! U6 A# R
-->
$ k, u, o) J, t! M4 M1 n</style> 3 _" D& W# |3 Q, i2 f0 Y
</head>
2 O2 R4 {' p, [* V<body> ; g1 s: V e2 b: L$ A
<div id="pic"> * P5 e6 R5 ?" K7 m) R
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , B5 j5 Q6 l4 B8 B: x+ h1 y5 r; @
</div>
# }6 J; C) _5 O1 ?</body> : |5 H% r3 a, y. x) k
</html> |
|
发表于 2007-12-8 14:55
| 