|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。7 m! ]" j; T: N
关键在于：max-width:780px;以及下面那行。
) C# M" z% W- T8 V* W固定像素适应: j5 O; X$ p% z, c
3 L* A% M* Q( o0 s
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> 以下是引用片段：+ V6 a! N& }) i* P+ W6 a# {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 v2 C4 q! R! z% j* b9 s8 a: k<html xmlns="http://www.w3.org/1999/xhtml";> . k9 e6 e0 D0 z$ s3 `
<head>
6 s! [ r5 u8 J5 t<meta http-equiv="Content-Type" c /> 7 J/ S- G% \- p: f( g, i
<title>css2.0 VS ie</title>
) Y: d8 p8 \# R7 [4 ^4 }<style type="text/css"> ( w( X7 r A0 |; h- o( r# s( w
<!--
3 C6 g# h8 S5 t, M' S Pbody { ( X% p! c$ S6 m
font-size: 12px; : \7 w! A; n; u9 z. F9 A- h
text-align: center; 3 S2 Y6 A8 T( u! ~3 U
margin: 0px; 4 U& K3 L7 ~5 c: Y9 H' Z( Z7 r' h3 A
padding: 0px;
4 l+ N! {8 G) y$ e5 v}
( ~; N- {8 i& Y* s, O7 S7 a/ v9 L#pic{ 9 X$ g q% N" ]; i4 Z7 D3 [
margin:0 auto;
% i( m7 W4 z5 Q width:800px;
' q$ O \& |! Q$ i: @9 m: v" E; k! R padding:0; ) U! L6 j6 K3 v, h: X+ m
border:1px solid #333;
9 y! a4 X) V3 [% u } ; ]2 M6 }; ~/ t8 O
#pic img{
8 l7 y H2 Q! _5 f& t" E, y& k: |$ g. Q max-width:780px; " E- v; C a; Q" g9 R/ t# ~
width:expression(document.body.clientWidth > 780? "780px": "auto" ); : c8 @/ V6 B7 Z& ?' J* l( R
border:1px dashed #000; " ]7 \4 q$ s+ o" L
} 0 J3 ~9 e" g! ~! ?8 z' K
--> 0 l# W0 o3 p4 C5 F$ D+ \
</style> + \4 u6 X) C+ E7 O) g) z
</head> " M# |1 ^* q; p: A$ l$ U, r( V/ C
<body> ! E' _: f0 O7 m7 z; U" Z
<div id="pic">
5 h3 g" \) K( m Z5 n3 ^) b<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! Q/ y* G$ m3 O: b" Y</div>
- z7 \: M6 p( N- ?</body> ! H, S2 M; T4 ^, s
</html>
0 V# M1 Z& P! b1 |$ Z, @
* q3 f, G; c6 `" d( R5 p百分比适应:2 w+ O& k! k) g7 A0 M& L
以下是引用片段：+ q5 [2 U9 U( {7 G7 O2 f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) C+ y5 M' W3 ]9 y<html xmlns="http://www.w3.org/1999/xhtml";> [6 a9 Z9 e' c+ f4 N- J' D
<head>
9 p; X _0 z7 ^" r; t: X$ ]<meta http-equiv="Content-Type" c /> ; {6 {* d$ j6 P
<title>css2.0 VS ie</title> 7 X) E1 ^+ k3 z: D
<style type="text/css"> 6 A( Y6 T; q) p
<!--
( \+ S7 X( B# t, d! I5 \% {( t' ~( U; `) ~body {
! h+ z- I2 t. r c6 C* Hfont-size: 12px; ; a0 y4 C* D& c( D* ^! q
text-align: center; 0 l# d, b. @7 W8 o: u
margin: 0px; 6 R. S; X& E; F6 @
padding: 0px; " m z& S/ C9 J6 a6 n% t
} : \7 O+ D; {7 l. f- f2 Y
#pic{
. V0 C6 h* u4 f O- q margin:0 auto;
0 S9 I2 o/ l- c0 r; G, J# L k% { width:800px; : K: r( H h0 W; T* T
padding:0; o. w4 Q# g$ t+ c" _" @
border:1px solid #333;
- @; ^, `- z( N- ^) H } 5 g2 `( ~) {" Z9 \& Y/ N% N
#pic img{ $ O* K# n5 {. |0 ]
max-width:780px; $ V2 p$ j& p% ^
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); + z1 B) j6 @- r3 O! N2 C* I
border:1px dashed #000;
, r0 t% k/ V" N. s g4 `} . p8 A$ w H; u7 i) w7 \
--> , t0 P9 S8 \) s! B
</style>
4 Y- |. i6 X8 F7 u4 ]( ~/ t</head> 6 ~! K2 i0 L! }$ p- g
<body>
, G6 j8 g0 Y6 F' F<div id="pic">
! R" a* M1 c' z0 `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! ?$ Y# R) b0 ]( ~</div> E3 L1 A! A5 g+ T: K5 Y
</body>
8 O2 | x6 H+ u& R5 B</html> |
|
发表于 2007-12-8 14:55
| 