|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14341
- 金币
- 2456
- 威望
- 1647
- 贡献
- 1404
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
% R- h( S8 k$ q1 q' a1 |& c+ o关键在于：max-width:780px;以及下面那行。9 ^0 }9 O K- m1 Y( O/ m# T" l' r
固定像素适应:
: R; I4 S' ]+ m& } r3 W9 o' K& x+ Y7 _7 D
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$ {- H* Q8 |1 a8 a& i- M<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& O) W8 a% z6 E. H8 _; {/ x, {9 [<html xmlns="http://www.w3.org/1999/xhtml";>
5 e! h7 o3 s9 l y7 Z+ Z<head>
1 n `. R& q. l5 q<meta http-equiv="Content-Type" c /> * r7 S* q5 L) O2 `: g. h
<title>css2.0 VS ie</title>
- g& v# x4 c: M' t: X' k; |<style type="text/css">
1 y: x# W" f9 z+ j& h<!--
, {& {$ ~& f q& Gbody { ( Q7 c& b& h- W# b3 T" a
font-size: 12px;
& n$ ~' {) W7 O" [: }text-align: center; 9 {: \/ m/ i! B+ }9 K$ E
margin: 0px;
$ @, q J9 r& E; epadding: 0px; * S) K0 i; J$ a
}
6 @/ b, O% \8 k% L. e+ K. F- W$ |* v! j: L#pic{
/ G3 _: B5 w8 r7 w& L8 Z. ]& o margin:0 auto; 1 W2 T4 g3 C( k) p& V" M' _
width:800px; . R8 Q3 p: T5 @/ b W2 h2 t
padding:0; " R& I; T+ U, I. ]7 K1 p2 w
border:1px solid #333;
, A1 F7 G2 t" M% @- M }
4 E6 Q6 c: \% C0 S V2 T7 v4 `: p#pic img{ / E* G6 O# W: H
max-width:780px;
1 G9 o) u. c5 H0 ?width:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 [! o4 P Z& Q
border:1px dashed #000;
3 q6 Z( ?( s) O. O$ `}
% _+ D% \" G9 ?4 J `+ ^6 f-->
4 }5 H q) \6 k5 s& @7 f</style>
! e1 {. A& V, _' o</head>
6 [, K5 c; E0 ?& J4 k<body>
% s7 u1 @# Y/ y- c# L<div id="pic">
. h9 G$ T( v+ E7 Z- R<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& J M6 E8 `6 |' w+ r5 _7 r</div> ) O& R0 w3 C+ _/ a' T
</body> 1 |2 W4 n4 @7 A
</html> P9 b0 [1 {2 d" P
: c, A. S. V# I5 D, ^" ~
百分比适应:. Q1 {/ ~. O R: J' w
以下是引用片段：5 _. B3 \) J1 m( r, v' ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! `0 y! Z( Z8 ?: U8 J* n<html xmlns="http://www.w3.org/1999/xhtml";> + e+ X3 X) d* W$ b0 P( C/ R
<head> 1 A$ i& S8 f+ ?4 h; {6 y" v `
<meta http-equiv="Content-Type" c /> b* A: d# O3 q; R; t7 S
<title>css2.0 VS ie</title> $ S$ o& i) Q. e0 f9 y. m% g* K' y. B
<style type="text/css"> 4 q1 v" i9 h3 u* S0 G7 L
<!--
/ Q* g$ j! W |/ M* o% _body {
5 ~+ E8 o) E7 e9 F! F3 ofont-size: 12px; Y3 K3 W8 t& d# T2 V
text-align: center;
, h1 V% Y# h& U" Y0 m& ]% y& T: Cmargin: 0px; & d) w+ B+ |$ w( w; d
padding: 0px; v8 G i, m' U7 N/ [; }5 l1 G# F
} ; _; S1 \, M6 M# C; f y3 j1 Q
#pic{
: p( o: ], z1 O3 v Z margin:0 auto;
2 K( C7 Y% L9 A5 j width:800px;
' T9 W. W" Z8 O padding:0; ) q" h9 W; h9 t& s
border:1px solid #333; " c" W: q/ u! y
} $ v0 K" p( t4 X* z, g+ f! C: S
#pic img{
r, _. o" h' q( [. `1 R) m* [! c* o max-width:780px;
( z3 R3 j5 _/ C+ `! J4 M Uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& ]$ ?7 z ~# w# _8 d' l# zborder:1px dashed #000;
8 M0 B- t% A* m* `! j" m! P. w}
- J/ W4 Z; Y3 ~3 G1 R-->
& x- i( `1 T( M/ q6 F</style> - z7 ?1 A5 f3 l1 g
</head>
S9 l4 r( O& y0 U3 N<body> 9 T2 X( c# x; J" K0 I; i
<div id="pic"> & _, r( i) `- n, l" m( i. s {8 x
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 w+ r* d& }1 V$ S# Y' ~. e</div> 4 Q" i* g- V; o& ^
</body> " e. O' a" D/ |! Z
</html> |
|
发表于 2007-12-8 14:55
| 