|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14347
- 金币
- 2459
- 威望
- 1647
- 贡献
- 1407
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 I& O2 z# f" g, P+ V) G4 ^& T7 z$ R8 J关键在于：max-width:780px;以及下面那行。
: U) D5 v' D! F! r9 t: I, H8 _固定像素适应:' {& C- ^# s" | y( h: P, g2 k) v
' W+ W, W- {+ @7 d& e4 ~2 j& \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> 以下是引用片段：
! \' E' D6 z( ]7 F& P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" m0 \/ R9 _5 G+ [2 A+ p1 Z<html xmlns="http://www.w3.org/1999/xhtml";> + n" }8 _' z6 e
<head>
1 c: Q1 h: u3 n# m<meta http-equiv="Content-Type" c />
9 E, k: z7 B6 i' Y8 x<title>css2.0 VS ie</title>
! G K+ R. B5 s' U. ^% [<style type="text/css"> & F) Q# j, a1 \2 U9 c
<!-- 9 H( d, f5 e* P3 G3 }+ R* U( ]. c+ X
body {
; n+ ]6 l! A% B7 C% mfont-size: 12px;
' Q4 T4 s6 e* r% htext-align: center; ' w+ r% t( d, @
margin: 0px;
. B% G( `, k4 ]6 xpadding: 0px;
Q3 b8 }( S& x& n}
9 h* i3 K) q6 j6 k; f#pic{
9 b9 |' h: f1 W) m9 _' }+ V e margin:0 auto; 9 z% e" e' G, y% n
width:800px; 8 Q9 ~1 B+ I6 E
padding:0;
+ f' g) o }( _: t2 x: P- S border:1px solid #333; 1 `9 `+ W( X2 m: @9 _
}
( s- f; s0 e- f6 c: w. a#pic img{ 9 n0 D: M) d1 F2 |
max-width:780px;
6 ?% P" _7 o8 }' c& Dwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ; |# I# v7 x6 u4 b) E; U" q# [ C
border:1px dashed #000;
, M, g! A# S% ^7 W5 _} $ p/ U1 h; Q& ?7 J5 ?; w
-->
J8 H! _/ h, ]# E. ?/ x8 z</style> 9 F& r, C Q4 W$ h0 H3 R% O
</head> ' K" B% @- Z$ M7 x+ S
<body> , Y1 {) y% v7 h+ K
<div id="pic"> 7 w' H: ] M/ o; i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * C w6 v3 U: s; A2 W( j8 Z
</div> 0 {% o+ A) a* h1 o- E
</body>
3 }1 V8 a! O) P9 S</html> 9 e( ^6 g% i+ \- F
( q+ g& [; W+ S/ G0 S百分比适应:% P* W2 T6 O. Q) O7 X
以下是引用片段：6 J& d0 o8 }- f5 A* ]5 R- V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 V, c- b% n9 c3 s, Q! a<html xmlns="http://www.w3.org/1999/xhtml";> 6 o: ~4 `3 n6 c* c9 N0 H
<head>
% V) G: T9 e( F. D0 j1 `" T<meta http-equiv="Content-Type" c />
0 v7 C) ^" _! C5 x- {8 m9 ?4 U1 c, I<title>css2.0 VS ie</title> 1 G: i5 M6 h7 @( R
<style type="text/css">
: M. H" m0 G/ r$ |<!-- $ z9 Q8 J1 T# J5 H) J% {5 h2 q
body {
6 q# y6 m' L5 Vfont-size: 12px; $ I$ [! Z U2 P2 Z
text-align: center;
8 q; Z6 c! O3 l7 ?( z9 h; Pmargin: 0px;
b: }1 Z6 P/ l. O4 p4 F: U4 G H; lpadding: 0px; 1 [% v0 ?! u T
} 4 U/ V5 ~# ^4 ~( \
#pic{ 8 g$ k/ L1 ^) W, o
margin:0 auto; 6 K0 n1 Z+ y" z7 u$ a
width:800px;
% V" G0 K& ^, G: A padding:0; + A. ~3 |, A0 ]3 l
border:1px solid #333; - ?, O; l* R; W; c: g
}
" C$ n, E# m7 j" R( { z#pic img{
# E i1 j1 l9 D, ` max-width:780px; ! s9 ~+ n2 k9 C0 b$ p. a/ ^* y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " d9 D1 H# s; F! ~- v
border:1px dashed #000; : ^& z+ H L$ D0 b. J1 I
} - j) E/ S6 a7 f0 M8 O
--> 1 |3 h1 t& k* L" T. W9 K$ M1 [" Q
</style>
2 ]* |2 U0 w& {$ g0 D o1 Y</head> : c" e" S8 v q: l' J" z. ?
<body>
; U0 o# z$ f9 N9 s1 O7 d6 [<div id="pic"> . T% z/ S. C2 n* E6 h2 _
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& p8 t* F4 Z3 }) ]</div> 4 A8 R1 A, W* z& U- }5 Z/ a
</body>
3 D2 G4 A+ L& _- _& r+ [</html> |
|
发表于 2007-12-8 14:55
| 