|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14249
- 金币
- 2415
- 威望
- 1647
- 贡献
- 1363
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* a) ^" ?9 U" L) l0 x
关键在于：max-width:780px;以及下面那行。
& h9 Z% {- X/ {, J4 ^( r固定像素适应:
/ C, U5 J; b3 \( D' M# I' j4 L% R1 t; w* ]& f
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> 以下是引用片段：
- F6 ?5 L0 ]/ n# g% z0 i<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 {0 K1 K) e) V) o n, k, m$ F
<html xmlns="http://www.w3.org/1999/xhtml";> I/ x% i5 t$ G. G% ~
<head>
- c/ ~& p& j6 W3 Q4 G7 @<meta http-equiv="Content-Type" c />
y( M7 _( d5 E' Y! |& B<title>css2.0 VS ie</title>
. \: {/ p+ L( M' X+ b! m0 X<style type="text/css">
- e8 v: ?" s( |0 }<!-- 0 U' p( y9 W# v" f& I
body {
. n9 h6 ?* j* T- Xfont-size: 12px;
- ?4 i! I) t, [$ Ytext-align: center; : `3 R& Q7 A% J! a$ g' M- o4 Q5 z
margin: 0px;
$ V7 N( |1 w* spadding: 0px;
: [; \% Y; b0 h$ O5 w}
1 }0 j8 M& ~# G#pic{ # H N Y: ]1 \; O/ H2 ?" w* W
margin:0 auto;
; {: k- B. H. W+ ?: i% e width:800px;
% }. k V* l0 o/ F padding:0;
: F1 O) y6 b; _: |- W border:1px solid #333;
0 {. K- i4 D% J" A2 d% y' T }
& K& e+ A- {; G#pic img{ ! L8 Q3 s8 I4 b
max-width:780px; 2 K5 g% D5 o5 X1 q* Z( }
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ) V, m& U1 I# ]9 L5 n' E
border:1px dashed #000;
6 H2 K c) R( E2 m# w( [$ p}
1 m. I7 J+ @/ I5 J7 G--> ' I2 d5 l9 H5 ~( ~& s K
</style>
$ b3 X& D: u# h1 a</head>
" u; T* a* t( O7 V" x3 E5 S$ D- K<body>
+ R( L5 q) W k* ?8 F* N% U<div id="pic"> $ Q; {* V- p& U! t. I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; l8 [$ x# y( Z0 ~, h</div> 5 H7 b! S& |3 P6 P
</body>
' p; ^+ A6 s: G/ d9 [( a( b2 T</html>
* b* F& A" X- K: j' ^9 z$ ?+ b
: ^2 y& `5 I0 Y. l百分比适应:
! b- K5 x) d* C. l5 x以下是引用片段：3 B* i5 Q( B) w% G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 d& N- o; R+ _
<html xmlns="http://www.w3.org/1999/xhtml";>
9 b" V8 h9 g% ~) {& H<head>
4 e( l. }; J0 r6 U* D* F+ t<meta http-equiv="Content-Type" c />
9 H9 r2 D* w4 T3 \: d: I<title>css2.0 VS ie</title>
& ]+ F# q: h' D. s% I! a<style type="text/css"> 2 k( m5 N }0 Y
<!-- ' V" h9 B7 m3 f' M
body {
. v' U: P. n+ d. k1 o' A- i8 H; a- Jfont-size: 12px; 4 r+ z, |* f5 b2 `1 n/ @
text-align: center;
5 _$ x ?) K- |. Y) zmargin: 0px;
* q3 W1 W- W9 v5 Jpadding: 0px; 0 _- H) k, V3 {
}
7 l6 s) `4 s6 f; Y#pic{
# v2 E" {. n r" S7 [3 `: ] margin:0 auto; # a8 o; r/ [& y) T
width:800px;
( a1 D+ _' D" Z n2 F8 W h. n padding:0; ( x) m; N9 E$ R$ u, v4 ?2 r3 p
border:1px solid #333;
/ L$ h" B2 j: P* c$ }$ _ } ) s; x7 O+ v( Y
#pic img{
+ j' [2 U, A0 { L max-width:780px; ) G6 s: T' K2 |
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. [$ E2 ]: X4 O7 [6 B: Q( Qborder:1px dashed #000;
) }! h9 U& N' w. w+ q+ {( l}
1 s4 X! t2 E0 h; B" t1 {5 ^--> 5 n& M0 N; ~( S. e% S% Z% K( a
</style> 9 n+ U" t8 J' d0 U2 R% i: T# G
</head>
; W0 q: C% \7 U5 g: {8 j<body> ; a; e) H: U7 Z( V: \
<div id="pic"> 7 p. d4 G) O5 v
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 |! [; l% W- D' k3 g, V</div> 9 h% z8 R: c6 m
</body>
0 R% M1 H3 R$ j- W% ^</html> |
|
发表于 2007-12-8 14:55
| 