|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14417
- 金币
- 2494
- 威望
- 1647
- 贡献
- 1442
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 X* R {8 K% }. ~
关键在于：max-width:780px;以及下面那行。. \9 E2 `; q s* m: Q; A
固定像素适应:& T$ R7 R2 L, @, P& U/ ?& P
! H2 ?9 z w d) v1 d* @! B; e3 Udotted; 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> 以下是引用片段：, a, `% n+ t+ z. g0 z: u
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ O3 H, v; \+ b/ W1 ^+ j6 s# m<html xmlns="http://www.w3.org/1999/xhtml";> ! W7 B. o9 t+ o& j2 F% o( N4 N z
<head>
; D6 M _: x/ I3 R+ }. w<meta http-equiv="Content-Type" c />
# p9 f( a: ]2 u<title>css2.0 VS ie</title>
( C: D8 r% |7 H( w/ `<style type="text/css">
# Q" K8 h7 o' j0 g8 e: J<!--
0 U7 M& V& [& W% c, e+ z; Gbody { / S( W9 `. `! s8 W( `
font-size: 12px; ) {' C/ f9 o/ b& U* v. f$ w; Z) @4 J
text-align: center; , C! m0 }3 z4 ]. b" B+ H0 L; `
margin: 0px;
1 s9 f3 X2 s: npadding: 0px;
3 h; p( j! d: S}
0 @+ [0 ]- n$ R% @* `#pic{ . @" f7 c. v- }. B2 ~
margin:0 auto;
" K/ O: S! l, h9 X% p1 L width:800px;
% ?& H4 P; p; C3 K* [9 K! A padding:0;
2 `' h) I# B+ I, T border:1px solid #333;
1 K; S7 g8 W0 u2 @8 K$ N }
3 j$ f; k @5 r8 {! ]#pic img{
& a7 w& k% y) N* P; m- P/ Q# b max-width:780px;
# _" l4 x' b- S% T' N8 Dwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 7 U8 R) D/ [0 |; `
border:1px dashed #000;
; T& g% s5 g/ N3 A}
# B* k# n3 @0 k5 L8 x/ d; @. `--> & H# f8 W0 e5 h" C& G4 J+ L
</style>
% D* y9 O' s9 E, a8 F F- j</head> 7 l; _+ H! z2 n4 o+ Z5 B0 G
<body> ' @8 g# b3 P! X/ y C4 i9 n
<div id="pic"> ) |( n0 z# J- K- }6 o
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ t$ R# [- B2 h- W. F4 a</div> 7 L+ e8 h" x& @2 r
</body> ' D& E" |- c3 j( `
</html> & b, H7 r# p, P/ A( K
8 t. j. I( v% E4 b% V百分比适应:5 D1 j! b" C$ R% Z$ a; ?* Q
以下是引用片段：
5 S1 b! A9 z- V/ J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' F5 n& C3 n- v! G. y# B; `6 J<html xmlns="http://www.w3.org/1999/xhtml";>
8 c, R8 m0 s& g, m( p2 f<head> 0 s) T$ [7 X z
<meta http-equiv="Content-Type" c /> 3 d* h( V8 f: K
<title>css2.0 VS ie</title> 5 ?, ]: ?6 R5 b# w7 Q+ O; Z
<style type="text/css"> 1 m( ?8 j+ Z" l( H+ G3 B
<!-- + {. s4 i0 L7 T7 E) G! T
body {
g: _1 H' P5 G) t3 Q7 q" rfont-size: 12px; 8 j% T2 f2 S+ U" ]" P# v" c* s
text-align: center;
" u1 T; r2 I7 w1 Q: Q5 m# M% vmargin: 0px;
) i3 E) C; c% }9 J: Hpadding: 0px;
, F E/ M* f* _3 u}
; q3 S1 B3 d% D0 J#pic{
1 l$ Q* f; E; C& h+ K, C margin:0 auto;
5 B7 U4 ]9 I) i! A& o' Y width:800px; / @& f5 w0 p1 M
padding:0;
1 P. \, {5 V0 u border:1px solid #333; 7 }+ G/ @1 e( f
} 2 [) o& x/ n$ K- @0 z# h
#pic img{ & T: l" b. U1 d" p) s& g/ m( e
max-width:780px;
1 o* W1 ]% Q0 O4 {; J7 owidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 C( l. v( N1 R/ B$ R
border:1px dashed #000; 9 X3 b7 u4 c+ F/ |& A
}
i$ w& r; b6 O- s9 t" o4 {8 _--> 3 R6 V. i* L8 ] @/ L ?" k+ k9 {
</style> / _+ A; h6 o7 a+ f* a
</head>
; D9 T& l# e/ ~) D<body> s M D h+ L* @& M
<div id="pic">
, {5 U& _! ]# x* g& k- s<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 ~9 G6 C* F& F8 A* k O7 p9 o. ?</div> # O% E. a( J( R* `) ^1 A: c, X" X- r
</body> $ S |. t& Z; ^, _
</html> |
|
发表于 2007-12-8 14:55
| 