|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14429
- 金币
- 2500
- 威望
- 1647
- 贡献
- 1448
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。0 Z( L1 Y2 U/ o; j' p1 O, P5 @
关键在于：max-width:780px;以及下面那行。
2 B- n# l6 u% r2 m2 I固定像素适应:
! q5 ~( ?6 d8 @7 }4 a# A; \1 c) w4 ^0 b
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> 以下是引用片段：2 n4 G* k6 y7 ]$ o8 x+ D4 X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + R- Q ]2 j9 Q# H. K" @% j
<html xmlns="http://www.w3.org/1999/xhtml";>
. _0 Y: k. B. T+ c/ @<head>
. u/ @ T9 b$ s# ?6 w<meta http-equiv="Content-Type" c /> : |! P% h% j) V3 D" M
<title>css2.0 VS ie</title>
! P# n* }0 N* M, b/ Z- x<style type="text/css"> 5 e- Z5 O/ ^2 b* \ z
<!-- 7 l- C+ P# M* A
body {
6 [5 e2 h/ v7 S0 B d- Mfont-size: 12px;
% I1 G8 `% W5 v1 O; Xtext-align: center;
1 [6 m, |2 m4 tmargin: 0px; 7 {4 L6 K- ~/ v9 S% S* G, g
padding: 0px;
V* d' p+ G9 w) x: e$ N2 X. `! Y} 3 \: z4 U5 `: [+ n: i* A0 C2 n8 c
#pic{ & F, h& Q1 E* N, X! T* ]
margin:0 auto;
9 @" K% o9 x. ?0 p4 [1 G width:800px;
/ [# a# \ B" _1 b \ padding:0; 3 r" G5 i; B3 K4 A/ Y
border:1px solid #333;
$ c, _' y7 w) L( v! o }
9 Z- l- A. l( y+ I+ f#pic img{
6 _2 j- n; d0 `; n! f" g( m max-width:780px;
3 I: O5 g/ n3 q3 w; Y& Bwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
3 X! W3 U2 M8 @7 K( Rborder:1px dashed #000;
0 j/ m- c4 ?' R} : N+ W5 |7 ?2 \. @% a+ T$ C
-->
4 S4 P. e! ~% @4 i</style> , |- e, O1 }3 a0 L7 u' b
</head>
% c ^8 s; S, }; v<body>
, o N( c/ z! a<div id="pic">
$ b# }9 X0 F0 x w& A- m- S<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , s6 N9 m/ D( u# E3 }
</div> : k; I) s1 s' ^. Y) Q7 a
</body> 5 S; {% q$ g, m1 d: \1 M
</html>
1 I8 v4 j7 `- Z: z% H1 u# _, c
& F! x7 W3 Y/ W- x8 Z百分比适应:
7 J! x6 I7 p( g以下是引用片段：
1 V N5 x3 r' M' ^# [" h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; C" C( i8 ^% M" Z0 i: V
<html xmlns="http://www.w3.org/1999/xhtml";> + J0 ?" C2 j+ M: Q& c7 p
<head>
6 `: d" |& t: m" E a @<meta http-equiv="Content-Type" c />
: f" R8 s, d" Y' Z+ V6 ^$ ^- L8 G5 j<title>css2.0 VS ie</title>
& S- ` ?9 [% t6 _<style type="text/css"> - I7 y6 J% c% [ l7 @
<!-- + O+ Y( u9 j& v% k( R2 ]
body { ?. P6 r3 c0 m6 f, Y+ k
font-size: 12px; # j3 |2 `: E9 [9 \( s7 l8 R+ ?+ l" z
text-align: center; ( L* ~* m3 H5 x6 u
margin: 0px; + }; M( [) j. C
padding: 0px; 9 g$ K- f8 S9 q6 Z+ O
}
3 Q% H1 b" k+ Q3 m9 ]3 u# `#pic{
& J3 r9 @& i; O2 U0 f$ H& q margin:0 auto;
+ v0 M: ?; P+ W width:800px;
( @4 V" U" t: J1 B* J padding:0;
1 m! w3 E: t" ^0 _( H border:1px solid #333;
/ H6 U9 H; B2 i$ R+ m% M } 9 D/ l L+ R4 |: U1 y( U8 R
#pic img{
7 W, l; _. T6 b; A8 T3 u. k4 r" M6 p max-width:780px; $ {1 e/ }, ?( H
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , v0 K- }7 D E2 c4 e4 e
border:1px dashed #000; ! ^+ s% u9 m0 |/ e
} 8 e/ @9 E+ h! u+ J- P& I
--> " ^6 w' w+ T) m/ i
</style> - B/ W. Y( b; o/ V% J* W, {. @! _
</head> " l* i7 `+ e7 q: h
<body> + t' j2 _1 }* _7 h! ]! b
<div id="pic"> & M6 S& d$ n1 k) H, `
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 @% q9 _9 M% D. G
</div> , F3 h2 I1 h% E% D
</body> ' F- B5 A5 t* ~% j6 c
</html> |
|
发表于 2007-12-8 14:55
| 