|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。- u7 t- h0 c- Y' E2 m' c; c4 @
关键在于：max-width:780px;以及下面那行。; L) g' L( `# I. L; |* l
固定像素适应:* D1 t' N$ y! e0 `
( P- t5 s' S' `+ Tdotted; 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> 以下是引用片段：
^1 S/ u, ^5 ~5 E t<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% h, ]* r' m" k% n<html xmlns="http://www.w3.org/1999/xhtml";>
. `. I8 e% m8 n; U/ Y. y<head> 2 X) {! f3 K' u3 x! `! i4 F
<meta http-equiv="Content-Type" c /> / k3 E. U: _( @& ]' h8 C& B4 f' [
<title>css2.0 VS ie</title> 3 a9 y v J$ X$ d6 |( |
<style type="text/css"> # m) U' W9 |9 V6 w& c+ ^$ b: {' L; G
<!--
: N9 F& P5 ]$ {& Q7 y; Pbody { . r3 O* e* r5 }, a
font-size: 12px; 1 m& X8 `# g# Y s. R
text-align: center;
^# t+ ^5 E5 B, [* c' H$ ]9 Ymargin: 0px; 8 t; E# i, ?) z( ?) `
padding: 0px; # v c9 s$ M( O# y( K
} 3 F' b: e ]' ~" L0 }
#pic{ + K. o8 W6 }: E
margin:0 auto;
0 D3 k9 U& d, U0 m width:800px; ! c1 ?5 A& I- r# A0 ?
padding:0; , c9 h( S% r" k2 E9 [% M" U) \$ ~
border:1px solid #333;
8 E( x8 x/ G R* {3 i/ P$ C4 v8 @ } $ t4 H, k4 Y* F7 X+ I4 r/ b
#pic img{ 8 |) }& l$ \* f! ~- N. q
max-width:780px; * w+ Q- \/ M1 I6 V
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ G, H/ j, t# q3 Uborder:1px dashed #000;
3 ^7 r( S2 q/ B5 x}
5 P: a" G- g/ g) S! O--> * h" m( e. `' E, @' R2 }7 h
</style>
6 \& \! a& o9 P! y$ }</head> ( j: Q ^: d* \6 H
<body> 4 N' \ Z; Y4 F0 O9 n6 x: S
<div id="pic">
( F; n0 d$ C' L" O* X4 U<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 Y) k3 j& u! r5 u
</div> 5 N. {- v8 Q' ~' `+ Y+ B# r" B! x
</body>
, p: h, ]: y# C1 r. R0 D</html> , G# |* J7 u0 K# ?2 ?5 k3 t6 i# ~
3 \ V T7 j5 }6 @, K
百分比适应:
. w! r" M Z- e& @, b2 T以下是引用片段：% [6 H+ _3 A- b" b3 A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 s; ?( n1 |# z( B) U+ u<html xmlns="http://www.w3.org/1999/xhtml";> 3 S* W4 P9 x3 x) a
<head> ) W# a, L$ a/ b5 a, a
<meta http-equiv="Content-Type" c /> % }0 O+ Z) u% Q8 o& G
<title>css2.0 VS ie</title>
4 Z7 f6 K8 {1 }, J: T<style type="text/css">
. Z% ?4 ^3 z8 m! s- y1 h& I<!-- ; O& i. w* l) r4 c7 G
body {
) g: x& j! m. y8 Tfont-size: 12px; 3 r& z7 F- P- f- z. i7 e! j7 @% g
text-align: center; + |- }! z. G6 i" y+ h" j
margin: 0px;
# `. p' \( [4 l/ `& Zpadding: 0px;
% V |) A5 j5 Z5 x( i; c} 0 R3 a1 g) b1 s6 D1 Q$ b
#pic{
3 X2 p4 g& q: @5 Q8 H. r margin:0 auto; " q) s6 S# d( ]2 T
width:800px;
5 D% O9 Q( q: T, Y padding:0;
( a7 I1 V U t1 S& x7 w, @* J border:1px solid #333; , g* |$ b6 c9 L( a7 `
} " ~, l7 j% b: Y c6 _) s7 y9 x
#pic img{
" e$ _4 ~# W8 J% O9 z3 f. ]8 |2 g max-width:780px; + j9 {% }: d, H I# l
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ! r( x. E) ~, U* [8 [, U6 z5 T
border:1px dashed #000; 3 X: T2 w4 B$ X
} ) n. r5 c& }* @( ]
-->
' \3 M3 `) ~( T9 U/ V$ ^6 z</style> + L0 u" ^! n7 k
</head> ' p* [* r- S. G* f. J
<body> : [8 M: _1 j0 e( c' J0 ]
<div id="pic"> 4 S8 L/ l( }$ X/ z3 a' U* E
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. m5 U; u D/ y- U, d</div>
& @7 }- n7 _ F; b; A: ^) D' [</body>
+ \- q7 Y4 F" Q5 q" l+ G% g</html> |
|
发表于 2007-12-8 14:55
| 