|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。3 p( q9 l- m' c8 ?9 a4 e
关键在于：max-width:780px;以及下面那行。3 u+ `0 L ?! T
固定像素适应:
, p) e4 W9 }5 Q8 M4 }/ I
`% i, U {! o7 rdotted; 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> 以下是引用片段：7 w0 T' a; A8 R; e2 j' \- X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" O( x7 O3 O& W+ `5 m, y<html xmlns="http://www.w3.org/1999/xhtml";>
$ I* `" h- K$ k$ r0 ^$ f+ E: m. C<head>
# p2 L/ W; S9 @; ~9 P9 Z<meta http-equiv="Content-Type" c /> $ j0 P9 g5 x+ G/ v9 @
<title>css2.0 VS ie</title>
% S. z# u/ {: f. o<style type="text/css"> ! q0 y' B- |9 Z+ t( W/ @' F
<!--
P/ H) a6 n& Y5 obody {
! G M: N2 w6 u9 Dfont-size: 12px; & d6 F- c5 y8 x/ n- \
text-align: center;
7 ]- |8 w2 L* W: f3 |! f% V6 Vmargin: 0px;
3 P) p+ s# }: C F" Rpadding: 0px; , n: S0 A# H- z) ^, D: ?% t
}
- M" Q/ r5 ~4 ~#pic{
; p) `- b/ V% j8 o6 [, ]$ m margin:0 auto;
9 a! t9 c/ P) L; e' g: r- _; q width:800px;
% A2 |; ^& b' p# U, _ padding:0;
3 {' e9 I) l" M! C# u border:1px solid #333;
' _- b3 ]8 y+ G: C# W3 B }
* [% n) o) |( I8 k$ V& {#pic img{ 2 v% v+ w! D' y! ^ s- p7 Y3 P2 @
max-width:780px; k! z# B) ]# Y5 k7 |
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# ]: l, r) J+ jborder:1px dashed #000; " e9 t# m, g0 d4 ?+ P
} 8 X; p8 r; }/ g& r3 S1 W! J
--> ( @* ^; u0 S2 R
</style>
9 ?3 X: {+ R2 v2 ]0 A& Z</head> % e$ o$ \1 V/ A- Q$ U: X1 @
<body> 3 I! B; W% M& B& m) n
<div id="pic">
2 i. R9 ^: w) u: p. G0 U( k<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* t/ p( M$ y/ P8 n3 y</div>
. }6 j( i# a6 V5 j- E3 J; D% K</body> % N i; w; P9 M
</html>
5 o. _: Q6 m* G) F9 d1 T1 U, v! a# U' {, M$ q! b" T# z2 k( e- ^2 n
百分比适应:
; |7 K# H$ A7 Z- ?% r4 a0 w2 E以下是引用片段：
- k$ g; [. b, A0 V; C5 v s2 N<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: o: ], f9 k" p4 T/ ~<html xmlns="http://www.w3.org/1999/xhtml";>
! r( |9 I, r: r7 b3 N5 v<head>
, x2 Q% }: V8 _9 T<meta http-equiv="Content-Type" c /> ( H* o' Q, _+ y7 E( g. @
<title>css2.0 VS ie</title>
. C' @6 y5 V/ _<style type="text/css"> 7 |9 [2 K! L! N
<!--
0 w$ T+ u1 V7 @+ }+ o: P- j1 O3 Abody { ) U+ w* t: W. f
font-size: 12px; 3 y. C8 v/ g% b1 F
text-align: center;
3 }$ r3 k, V Dmargin: 0px; L4 d: ~2 y3 h$ R" w2 a
padding: 0px;
8 G! O. M) g' E; ~} 3 Z: O# n( f7 K& j
#pic{ 0 R$ Z9 v( [. o Z# e
margin:0 auto;
4 e6 s. ]; S4 g/ b4 b) L width:800px; 9 f$ k7 f% Q" G4 ]* E/ v
padding:0;
& ^+ W2 A9 E( }3 V* ~3 m border:1px solid #333;
8 L( N4 D+ d7 E7 F+ T2 \" X" D5 v- g } 6 a g ?" m6 s7 J0 g# h# a! Z
#pic img{ 0 y" b) J8 l& A" p& y4 C
max-width:780px; 1 }+ w5 E/ J+ k+ T! c- A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 j9 J/ D+ Y) N _/ y T4 dborder:1px dashed #000; % e' o/ D7 L0 X9 V, J: f2 }
}
$ J4 T! T" }) Y) e% u% f--> 6 U: o' _4 Q& d1 W% i
</style>
* t1 h0 V* `! I1 Z! k</head> - W0 Q5 e |0 y1 {
<body> . w& K2 {8 K' s! T2 n" t
<div id="pic"> ' N& r. c& Q/ f4 N
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 W N0 O, u6 @& n; h
</div>
0 A; D9 O/ h8 F+ S5 C) w</body> 8 ]& D8 t' @7 D4 C1 v5 j( |
</html> |
|
发表于 2007-12-8 14:55
| 