|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14333
- 金币
- 2452
- 威望
- 1647
- 贡献
- 1400
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* x: c6 x, A# N6 j
关键在于：max-width:780px;以及下面那行。/ n) O7 X' F. g8 a t. R1 X
固定像素适应:$ Q ?- O. J2 S6 G
) a1 L' g* N' }/ Wdotted; 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> 以下是引用片段：$ J6 u. i& ~( r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> d2 m. \9 N3 V S
<html xmlns="http://www.w3.org/1999/xhtml";> 6 z9 B* Q' x; F- ^% s1 Y; }
<head>
u$ L0 t/ R k+ w<meta http-equiv="Content-Type" c /> % P0 I! d" p) Y; U* R" f I
<title>css2.0 VS ie</title> / _& [' y% S2 T# }+ d
<style type="text/css">
5 e7 _9 a( \4 ^- z<!--
0 i8 G) Z* e) D9 e% r/ M$ ybody {
( S3 u- v ^* R1 r7 d4 [" @font-size: 12px;
( X! [4 O O' l" P# d) `text-align: center; C2 H! G( K4 o8 d( Y
margin: 0px;
: l( y5 ]& M# Kpadding: 0px; - H, }- ]- ?7 M w
}
: z' b# M. ~ F3 x#pic{ : Y8 x r0 V/ ?0 O- W
margin:0 auto;
3 J+ h0 V+ u3 D B9 P width:800px;
: n7 u5 p9 x, ?; }- k padding:0;
8 k$ d6 @ N1 f! [ border:1px solid #333;
$ W" |$ z$ W' o' c5 D& e }
) B% P$ X' {* ~1 i P#pic img{
9 p: D7 z5 [4 [, t' T' U max-width:780px;
@( i2 ?7 X7 b7 F2 o! [9 j% }& X2 }width:expression(document.body.clientWidth > 780? "780px": "auto" ); ) p2 e" ]5 s2 M# C6 q3 [6 q% C; G
border:1px dashed #000;
* K9 ~4 E- g) F& ?( j7 ?} " W& ~) {1 z4 r' r" ~
-->
6 K# M V2 g: u</style> / ]' ^ o. M1 ]' F1 c
</head>
* a# j" d& C3 [5 K. @( @" w! e; y<body> " i$ B8 X2 c( b# y. o9 p( y
<div id="pic"> $ L! c/ s8 @% R$ d+ `0 \4 K* t
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 c$ E8 i& ^- m' [' k/ j; U) J
</div>
e5 R! {8 ?3 Z$ V: p0 U( i- h# t</body>
( K/ N# K# o5 A: m, p- A9 G</html> % s; j, a# [9 M. @- \; X
O( G7 w G4 Y; j* `1 l百分比适应:
1 ]" d! s v- l9 z0 |以下是引用片段：# f) B/ I' G7 o2 a" ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 B4 R/ c" M% {9 u$ r<html xmlns="http://www.w3.org/1999/xhtml";>
9 S9 V9 {# B2 O: @1 E<head>
/ C& t% ]5 F) `2 n0 U- J* k<meta http-equiv="Content-Type" c /> / T, _! r K/ r8 `* [6 }7 j6 t
<title>css2.0 VS ie</title>
! l0 l2 p) s7 P2 w( [<style type="text/css"> ' o8 M1 Y7 Q9 p
<!-- 4 `6 m0 Z; W4 } m
body { : j! v- x) @& ]
font-size: 12px;
2 g5 Y$ L* r7 Xtext-align: center;
3 x0 i9 n5 ?4 V! S2 Xmargin: 0px; % D7 W/ j4 R- p; p7 f7 K6 q
padding: 0px;
0 l& _ `0 G3 Q- P% k" o}
7 t2 \- w. R8 g6 G+ o#pic{ 4 F8 q" U2 R, k8 E& i* ]; p" a
margin:0 auto;
8 K% L8 Q6 t; V) J' G width:800px; ! j) D( O: k" B
padding:0; + { h: u& d5 y" o. w6 s# ?2 ?
border:1px solid #333; $ H4 H, T( [: q- k4 d8 E
} 8 I5 W$ g9 d; j
#pic img{ " s7 N8 [- }8 h1 c5 \
max-width:780px; ; G1 J- V: Q0 ]9 b* k
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 J4 q4 [( W3 Gborder:1px dashed #000;
# M) t- e7 s8 _# ^) a }4 k}
9 w: X4 v9 q% M-->
) c: x4 G& P0 ]+ R/ [</style>
( t0 R4 ], Y" E" \ K7 B% G</head>
. \" K* `( l' a* t- f3 K$ J0 S: H<body> ) q2 v. W% E( [( k2 S5 F
<div id="pic"> ! U) X3 E+ I3 N( c. m' j
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( Q. r3 K! }( b/ u
</div> 9 N% [. V, a7 r3 r% G) k
</body>
1 ^* w0 }, ]6 f- H</html> |
|
发表于 2007-12-8 14:55
| 