|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。, A7 }9 u0 u1 x% V* H+ }$ M/ x* U
关键在于：max-width:780px;以及下面那行。
- ^7 g' v9 O( L$ h8 N固定像素适应:
% s4 x/ o- ]& G6 Q1 e
! Z$ A! z' _3 P2 j' W* odotted; 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> 以下是引用片段：5 C0 @, o+ P% E2 l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- e6 _0 M' e: O: ~4 P<html xmlns="http://www.w3.org/1999/xhtml";>
- V$ W& W6 [* g6 t) x% @$ Q<head>
) r# c% I- c, L5 e2 |( Z<meta http-equiv="Content-Type" c />
) X, k* l. p- E7 d) y# z0 x4 P<title>css2.0 VS ie</title>
5 d/ T& Z5 m5 N# U2 {<style type="text/css">
/ z1 q2 {6 Q0 V# S6 e: R6 D& ]<!-- : Q) a2 h* [1 B+ P
body { 5 |7 t: r1 w* C8 r2 p- Z
font-size: 12px;
; S% w8 H' E9 q! V- y7 }text-align: center;
+ } N9 P# Y) U% L2 i8 Vmargin: 0px; ! t6 G) H4 a( d) P
padding: 0px; ! e! u& l/ @2 X$ x& b
}
+ _) f+ W7 t# A/ X& K S#pic{
( Y5 D+ t! J4 q2 `& ?* y7 d1 u margin:0 auto; ( \+ y) c- ]- Q+ [# [' ~
width:800px;
4 D% H7 z. q- { j2 g padding:0;
. y. e) B- r3 h3 E border:1px solid #333; 4 g% g2 ?- Q9 y8 p) J
}
% q/ B, [* W" |#pic img{ # e5 x! W+ T1 G+ P# n
max-width:780px; 1 Z" l G2 Z2 R
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ; \# {: s+ c# e% U7 c
border:1px dashed #000; 3 e( L( s" q5 m+ \
} & E) L& s) E* u& Q4 q' b, p8 ^' r% |
--> $ x) Z* e& ^/ B) u! c$ J
</style>
1 K& g, I7 T5 n7 ?$ ~</head> p7 g6 U+ ^% M1 v& K7 f6 V, b
<body>
$ b8 Y- w, m) c0 v, v5 ~; D& c<div id="pic"> + C* G$ T; F# m" @$ A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 O/ z- U& J: b) @1 v% A# D' r</div>
+ n, m b+ t+ g8 Q6 i</body>
# }) U; S' P5 i. `8 _</html>
3 {+ I+ r+ l. I* T9 }- W+ b; w
5 i1 I" j6 `+ B. m6 j2 t+ Z百分比适应:0 o0 G& Q& ?: v) N# ^7 g0 E
以下是引用片段：
$ E( d! |# Z# p! C" G* P, r<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - v7 g) c4 F: g! ]- }
<html xmlns="http://www.w3.org/1999/xhtml";> + s, Z" ]7 ~# k9 {
<head> $ C) X2 C6 m2 I
<meta http-equiv="Content-Type" c /> + e5 n4 z. E, b! ]8 q1 w
<title>css2.0 VS ie</title>
4 I9 a5 `) r! Y8 x0 ~5 x- M<style type="text/css">
$ o! Z# L+ B8 l6 t<!--
* Y4 b. E* k3 R2 cbody { 1 \5 D. ?6 c |$ j q
font-size: 12px;
8 ~% k+ H) j0 utext-align: center; * u1 h! c5 A8 A( D5 \ Z: x
margin: 0px;
2 j% |3 P% G8 n) i/ q: rpadding: 0px; - K1 }! G# ?! w. g
} 7 {5 X5 C0 w8 T- i% v, `
#pic{ & G& Z1 f: m# r6 L
margin:0 auto;
' m3 w" n7 u' F; S& | width:800px;
8 K/ b* u/ ?6 f1 O padding:0;
, s8 W+ ?4 f- g( d2 S border:1px solid #333;
' W% E; P/ V7 D2 c# x }
/ _) d- C5 t" ^4 G#pic img{ 8 D2 r' A! h) Q; @3 z
max-width:780px; ( f. z% x4 F; W; Z/ e. Q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 3 G& C; D) s. E5 l; ]8 w
border:1px dashed #000; 2 F( } t! S% f' O+ H2 b, d$ B
} 3 n9 p! [- w/ B$ h! _& a
--> 6 o1 A5 ^/ [, p7 @) v
</style>
: K: L, y% E" K. K</head> # v7 @. l; u1 W3 A. h5 J
<body>
* _, I' ?. V* H5 J$ `<div id="pic">
6 t( h' B a9 Q; f U9 U<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 ]4 Q4 N; P( f w1 S; n) G
</div>
/ [0 q ^8 P( H2 R2 @2 p</body>
6 G4 [' j$ P* ~' S0 Z0 @! Z</html> |
|
发表于 2007-12-8 14:55
| 