|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14161
- 金币
- 2371
- 威望
- 1647
- 贡献
- 1319
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 T0 y, N' \1 [$ o9 C# b. H* ^+ Q; _关键在于：max-width:780px;以及下面那行。
% N w$ S+ a( M; C/ a# @固定像素适应:1 L- X: o, P/ D" B2 _( v
, }6 I# a5 z3 edotted; 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> 以下是引用片段：6 V* J) u8 p4 Z5 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 `- t6 L, B' _8 p" l; y<html xmlns="http://www.w3.org/1999/xhtml";>
8 ^/ g( V# |( ]9 h) }<head> - a9 g1 h' b2 e( r" b1 [
<meta http-equiv="Content-Type" c /> * A; J' R" A8 I ~6 h+ ~
<title>css2.0 VS ie</title>
@+ u% V( r! r<style type="text/css">
" J8 q- s; L, T, |# p$ r6 _& Z4 p<!--
) B0 Q9 G* j, N8 u: l4 abody {
, X$ w( Q3 v/ z1 i7 \4 ?; p( Rfont-size: 12px; ; f. u4 ~) D3 ]7 Y: K4 @# N- A
text-align: center;
) p# n% X5 q% smargin: 0px; 5 V5 Q9 ~9 o+ i ^0 [' m! m
padding: 0px; # I* h* p. G$ E3 |$ A
}
* V& ^2 l0 f6 \' f#pic{
! w" }) h7 c4 E+ A7 P( V4 I margin:0 auto;
0 m K& W; a5 ~9 b. \ width:800px;
/ @" f T( F6 d, f2 y0 A) ~9 @7 ` padding:0; * X0 Z2 A0 D# p! C
border:1px solid #333;
4 {6 {" G5 ^4 n% S } 6 K0 w. R) G$ ^8 d; s
#pic img{ - g& r5 T; f/ ^1 S, f n
max-width:780px;
0 b5 J# O# m, C1 Rwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 7 l/ u3 r" M# G T: c" @
border:1px dashed #000; P& ^, j9 E- B$ V. X7 l. X
} 7 W' A' r( W* a4 T' m
--> ' Z( f# d' u: h% u) L; v
</style>
3 I+ _: j- P# Y</head>
. Q# W0 b4 |+ g( ~8 p' @<body>
0 v, I& Z9 U( Q: z* `/ P! N<div id="pic"> 8 u( j4 D4 g9 P) j" M
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : n/ `$ @* Z/ L9 u- Z" Y. g
</div> 1 P6 E4 Y- t; g% Y! K
</body>
* I$ i' D4 H. C" z</html> 3 b9 g1 x6 r; p& Z% V' D
) _) | s5 r- M0 P* k百分比适应:' p& E4 e: h1 P7 z- ]( D
以下是引用片段：; }3 A* A) N8 @0 K) F3 E7 t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 Z H ^7 r# {- B
<html xmlns="http://www.w3.org/1999/xhtml";>
& H/ Z$ X/ M8 f" E' q8 y<head>
9 A$ _* S) O0 P, f- r/ v<meta http-equiv="Content-Type" c />
@/ n" ^; v5 N6 Y<title>css2.0 VS ie</title>
: O, E1 h) o# T% }' f/ ?1 q( T<style type="text/css"> 1 t9 b9 A4 C* C2 ~8 v
<!-- / u3 [9 X1 F" ^" j8 w6 G
body {
2 x* b# s& x6 K% e- W2 W6 qfont-size: 12px; 6 S$ Z. s/ m# z& o5 m6 t7 D
text-align: center;
& R! C2 {' ~% u& j; |margin: 0px; - z6 Z+ C# E# V, }9 F) A! R
padding: 0px; . c+ q( O0 y" P p- q
}
2 k; V" \9 v5 X4 {#pic{ + N1 f, y" v4 a1 ^% _1 D8 w
margin:0 auto; - f& I0 {) q n/ Y3 x2 L
width:800px;
4 ]* @2 U; ^) ^ padding:0; 0 E/ I) L) q! B; k
border:1px solid #333; 8 k. t' j3 e# Z5 a
} % D9 m( z6 p2 G! g D4 [
#pic img{
/ ]& e7 W$ {' g0 M$ o max-width:780px; & V" K" L' g G5 x1 M3 k X
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
: p! ]+ ?. `! v$ Rborder:1px dashed #000; ]# Q o9 u1 i$ Q- m
} 5 G7 P8 q( Y; {/ m; \* l
--> 4 `; T9 J1 ]9 @6 O5 G
</style>
- p9 y% A4 o7 H4 o* c0 C% r; A2 Q</head>
8 k$ b4 s/ T. n1 d n# w<body>
5 `+ k! p6 w* r! @1 o& Y<div id="pic">
' S% o+ y7 v& D# D* f6 k7 n. C<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / e0 O1 P% ?3 i9 n1 p
</div> # o: a2 s: I: V+ d% n3 N) d' P
</body> / F2 _+ N9 P, H4 q6 N# U6 ] h) o) d* D
</html> |
|
发表于 2007-12-8 14:55
| 