|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。2 Y) }; s4 A" K
关键在于：max-width:780px;以及下面那行。
( i- F& s3 m3 U- W9 L0 n固定像素适应:
6 L1 p. j, S4 G8 F; G& m4 R9 P3 l- T! g+ f4 `
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> 以下是引用片段：
* n5 d7 `) \5 |/ }5 c/ U+ m1 G/ y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> p1 P3 m- }7 p, _, o' z( k
<html xmlns="http://www.w3.org/1999/xhtml";>
* p7 T' h7 t1 ?7 l& {" n<head>
; Q' {! c& B1 U: t<meta http-equiv="Content-Type" c /> 6 E1 X" a% S8 U4 ^) P+ K& a
<title>css2.0 VS ie</title>
$ j) N% y8 d% V" N z' A% X: s- M) S<style type="text/css">
$ H) Q9 D6 X: x2 B5 C3 h<!-- 6 c* v& U: G( n* S( k3 S' E; R
body {
0 H8 R7 ~/ _3 C6 M8 P$ O1 Rfont-size: 12px; - i5 y9 L9 T+ ]; v, K
text-align: center; 3 k* t9 b: J+ P+ l7 {; y5 Q: Z" s7 {
margin: 0px;
2 Y& G* b2 q% @/ ]# R+ V! K" R5 epadding: 0px;
, d/ l, A6 h% ]' g} # i$ n3 M( s; v
#pic{
6 z% T% }; l/ M. g9 @ e# R margin:0 auto;
, J& M" ~3 N5 {, k# R4 X* W% z- } width:800px;
4 N3 w" `* Z0 @: w! k& q padding:0;
& u" M7 v; n. `1 G border:1px solid #333; 9 ^( Q D! N9 n7 {, k4 Q
} % {1 ~ S0 T" J
#pic img{
: e7 }; n# I: ?, f8 {2 }7 n5 P max-width:780px;
! F% p: n2 u$ C$ `8 J9 m: i+ swidth:expression(document.body.clientWidth > 780? "780px": "auto" );
3 p1 s6 Y4 u: m0 d8 v/ Kborder:1px dashed #000;
0 [) i: J1 e: z0 t} + w: `/ H9 w8 o% R+ o
-->
% d- R. H7 y1 K) y9 s</style>
) N% H- v# a t</head> & q+ N4 N& ^! P# U2 W/ Z
<body> 8 p; A! C% O* u: W* J! p! ^
<div id="pic"> ' ?/ z7 B& K4 {% ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- P! a5 y+ a+ {, y1 B</div> : K; a; W& q! L4 i
</body>
+ G0 \6 B; I, y6 g0 T</html>
8 m+ g8 b' A4 @3 u, R- c7 {6 N! g: O* j
百分比适应:1 T* v T- e# f% v# R" i
以下是引用片段：- v" T4 e2 @: I7 ]# }& e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 T1 @9 Y+ T/ U6 l5 L<html xmlns="http://www.w3.org/1999/xhtml";>
' h) r! b$ j+ N N1 S! [% O' j<head>
. A. O' k0 Y$ w+ H3 ~<meta http-equiv="Content-Type" c /> * @3 o0 O/ E' j! l
<title>css2.0 VS ie</title> " ?( Y; h3 m" h k& ~3 o$ d: {
<style type="text/css">
- i9 v3 H1 d: U% r5 ], ?<!-- , u- {$ l& @8 t2 ~& p t
body { " s0 i# p* }; b. _- O
font-size: 12px;
8 c1 |; O9 Y5 p; S' a7 N" Ltext-align: center; % V/ @& V. P' X% F; q* E8 s0 g
margin: 0px;
: Y2 b- [$ q* jpadding: 0px;
+ x% |% b0 ^% X1 R9 @}
0 }/ w/ v8 F. p#pic{
?+ x& h8 ~8 }0 K margin:0 auto; 8 \. v k8 e# ^# T ]
width:800px;
. m4 b v+ E e% R7 u" G+ x padding:0; * ~; m, B5 ^! p N" _' T
border:1px solid #333;
+ C# l1 d# a1 L$ E9 n0 ~- P7 x } 2 V" y+ D6 h) L7 O q
#pic img{
% ]/ ?1 c* J1 a- u8 ~ max-width:780px; + ?& l* X6 B# K2 ~5 x
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
p0 K5 t9 P% {% u3 Hborder:1px dashed #000; $ q# @" r3 f# s& Z
}
4 c6 `+ y, }2 e* b" y3 a-->
* H. K# {5 a' B4 n+ E) R7 }9 ~3 O9 g</style> # v8 O# n5 j4 h
</head> 5 \' {2 t8 S( W& l( P
<body>
6 _* {+ i4 J( @/ B+ o. e% N<div id="pic">
i7 b2 s. a! i- g& O2 m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - s0 Q9 U' b% J7 H, y* O- A
</div> 9 g; C+ e; R. ~+ }
</body> , A0 w: [; j% W( |
</html> |
|
发表于 2007-12-8 14:55
| 