|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14333
- 金币
- 2452
- 威望
- 1647
- 贡献
- 1400
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。2 l* A4 \# e G/ M0 [+ R2 s3 |
关键在于：max-width:780px;以及下面那行。
7 k& {2 D( v. ?& G1 q3 u& @! g- T固定像素适应:- P: a5 e, x/ D! I! f
7 c- j, d; G6 f7 }1 k2 _" L& V9 [
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 f/ Y/ B6 O" X; I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 T6 I$ Q; l7 @: x
<html xmlns="http://www.w3.org/1999/xhtml";>
, z5 k0 j6 L9 l5 g1 Z9 i5 D<head>
/ M0 k& r- f2 H$ M" k<meta http-equiv="Content-Type" c />
8 Z% R0 _: l* K<title>css2.0 VS ie</title>
4 X6 h% B9 D* T8 K' M3 n<style type="text/css">
( d( c1 Z" m7 [6 k4 u9 a<!--
6 Z2 f* d+ e2 p, F6 i% Rbody { # u- `* D# ` m/ L% i1 ?6 v
font-size: 12px; / p* W Q2 `, l) ^
text-align: center; 1 B# O4 l7 v. U2 u
margin: 0px; . L* {4 `4 T' {5 c
padding: 0px; : i2 [# Z4 ]& s
} " G0 }6 _" G d5 G% X7 \! z- Z
#pic{
$ l# V3 d8 x8 B* f* R margin:0 auto; 6 x" @+ X. ]3 D7 R
width:800px; ) m7 m& U6 b/ _
padding:0; ; E6 X- C. f$ A2 B! x
border:1px solid #333; ( p) Q% _5 t6 r$ F* A
} " [( ?7 ]" T- a* F
#pic img{
( x/ V9 c% W$ ^) R t max-width:780px; ' I0 \- V+ q' P$ y) Q6 \. P- S4 y% Y
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 4 q6 o: p+ Q9 w* ]* J9 f) A0 `! A
border:1px dashed #000;
6 G# j" S) J' s3 |' |' n: _}
3 p# Z) b( |+ E, Z m) }* a; |--> . S2 d& ~! c$ b9 e1 C
</style> , h, @" _1 F0 R1 t/ c ~, ~+ @
</head>
0 l+ X/ D$ X& D<body>
& Z2 p# V$ J2 u- C<div id="pic">
4 c3 L# w. C; w9 i" K! S5 G( ?<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
u. z' ^$ r; v8 K2 b: ^</div>
" E) m- f) z* F( P</body>
) Q' b" l8 l/ Z. O6 J! {7 A0 d</html>
. r/ |0 r+ f! Y8 \" {1 X Z2 m" s; k; N |; [7 Q8 M
百分比适应:
6 K. k e$ o7 g: s以下是引用片段：
8 U# o! i6 t$ S) O( P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) v: Z0 q6 x @<html xmlns="http://www.w3.org/1999/xhtml";> # @2 ]: u- [% g
<head>
* d1 i, [$ a/ r<meta http-equiv="Content-Type" c />
! [8 ?" a, X2 k2 `+ U. Q* m<title>css2.0 VS ie</title>
9 a, h2 i1 N7 r7 q1 ? ~- n4 l0 X<style type="text/css"> 7 ?1 m0 a4 y/ r4 ^9 w
<!-- , Y& |$ Y) D7 I! U/ Y
body { # i3 W/ W+ T9 ?9 ^+ D' q5 L
font-size: 12px; % ^$ R( j. s8 Y0 V
text-align: center; * i3 s. S! U+ q$ G
margin: 0px; 3 `( u& ], R+ y
padding: 0px; ( m* Y" ?9 E2 v1 Y# {4 A
}
; q" J; {* k/ ^0 T. B. C( S6 o0 c#pic{
/ O p1 O w9 U! P0 K3 a margin:0 auto;
* m4 |1 N6 |, S, t) k' ` width:800px; 5 m) e- r8 X2 T; r3 l5 X# Q* p
padding:0; ' z" `, o& @0 F- x4 o- m; G6 Q* B
border:1px solid #333;
: H$ I0 `7 w/ c3 y( b2 ]% R9 I: t }
* ~2 K6 a1 b/ T8 x#pic img{
: l1 b- k2 J% d: y9 W; l2 }2 x8 d max-width:780px;
' x3 g& G: e* Zwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) c; `) j% h+ ], q6 mborder:1px dashed #000;
6 e5 N6 A* H5 m$ d% u/ {}
_ ^" j @3 [/ A--> 7 x X9 {+ y! S" |
</style>
: w d+ N, n& _9 |$ t</head> ? Q2 x/ }9 Q+ q
<body> % U4 g& o/ ^1 {1 j3 V
<div id="pic">
+ y' z" d5 u# G" A<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! ~6 K" b- E; ] z# k/ D</div>
) \' E. C- }! Q</body>
' \( {8 @2 q" m; I) X# {</html> |
|
发表于 2007-12-8 14:55
| 