|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14387
- 金币
- 2479
- 威望
- 1647
- 贡献
- 1427
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。6 a- l. L' G r0 m1 e
关键在于：max-width:780px;以及下面那行。6 N- W1 t Q g4 B% ]$ l
固定像素适应:$ ^( |; e/ n: B+ a5 O
3 A' C# A) p; |8 Q2 ~
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> 以下是引用片段：
3 P3 n& ?. \/ ~% x4 T0 }$ Q0 a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 X- X4 L6 J* _3 A# F" {) e) P
<html xmlns="http://www.w3.org/1999/xhtml";> : u9 ^0 B" w9 e- y
<head>
, Q! @1 k, l0 @7 ]1 l2 [6 i<meta http-equiv="Content-Type" c />
4 w/ C5 S3 S4 T4 j<title>css2.0 VS ie</title>
$ N# \8 W& D9 k j% A6 q<style type="text/css">
' Q, c3 C5 j8 K( u# A<!--
" _5 l- r/ E7 Bbody {
+ r- u! o& H) g& Q7 ofont-size: 12px; # ?9 }6 c$ }' i, K, {; P
text-align: center;
- ^4 x: G8 L+ V8 b" ]$ |margin: 0px;
2 X/ C. b7 T" m' \- w6 o, T! j, upadding: 0px; 1 i8 b: P3 Q8 H5 I2 d! u
}
! \' p' U" ^2 q- @7 J#pic{
. I. ?) _+ d P margin:0 auto; 5 Z/ E/ \ w2 ]& D
width:800px; 8 y3 Z. c# c3 D" c& w( W
padding:0; ) j$ w7 K" N5 x( C" k& g, D
border:1px solid #333;
' L2 d- G# g$ u; b. J* p }
8 ]* P- C% [7 }" [) N#pic img{
5 ]4 W5 C+ F+ _: M max-width:780px;
4 _9 R/ W0 Z) ~width:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 y9 ?- E ^. R6 }8 E' [ z& X
border:1px dashed #000; e; R9 \! j8 b( G& q- D
} % `- F9 [: T7 Q, G/ E
-->
, u* B& r: A; O# Q</style>
: U# z4 c% y8 W8 Q/ r</head>
4 x" Q- _3 c5 m L7 H4 b; q<body> + \' Z+ [7 |0 T. }& z8 m- \
<div id="pic"> - Y5 R/ p4 I, {
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / `! J: ]+ _/ _2 \" @
</div>
6 a `1 J9 G' J9 }$ T</body>
) c& }! I8 f* @</html> % B" U/ r3 g9 j2 e
2 {! s3 ~" `9 j+ M; |
百分比适应:
" D; k- D8 w/ v8 X" `1 k2 O以下是引用片段：0 Q) F9 x! y2 o0 { `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 f6 C6 _' P- |3 C3 d7 ^# w<html xmlns="http://www.w3.org/1999/xhtml";> , S; _6 M9 ~3 V4 V: H
<head> 0 T9 O5 X5 [) C
<meta http-equiv="Content-Type" c />
: r9 i& O! l* Y8 J0 N3 W- M<title>css2.0 VS ie</title> * r! g' G0 d4 S: u3 Y4 |
<style type="text/css">
+ g$ X! w a' ^! i/ v$ C9 l2 }# p: p<!-- & i$ T4 H; x' h, i
body { 6 F6 q3 E1 F/ A: b8 `% A/ ]
font-size: 12px;
( J1 \; p T3 Rtext-align: center; ) z, j& y7 L# G! w+ B5 U v6 Y
margin: 0px;
* ?, E R/ M; @" O: Mpadding: 0px;
/ n; |) j7 _& d& S C( Z} - g6 q& N7 H9 F% m: L* B5 L
#pic{ : N$ ~# w8 d# n7 `
margin:0 auto;
, U1 d) l0 ?6 _: r; p width:800px; " \1 O0 Z3 y$ Q0 W
padding:0; * F% V- P; |- ?9 z3 F
border:1px solid #333; 1 M8 G; M5 d0 d0 c- I$ `0 ^, @9 c
}
4 }( l! U; j' ~ o#pic img{
! O8 O3 L0 _) {- E5 [7 F, T max-width:780px;
x+ a* z& h! wwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 8 u5 K/ | D4 k: a3 l
border:1px dashed #000;
! _3 M4 A- J; ]6 F4 j9 d}
1 i' I0 m1 x, [1 B& `# I" f+ X! g7 H--> 2 q* n: r1 Q8 ~& b3 {! O
</style> $ C* x/ O- f4 J5 A4 c8 B# ~0 Z+ K
</head> ; y h# a9 y9 ^! s4 P: J
<body>
5 @$ C( V- ~7 _' L/ I. K. P5 ^<div id="pic">
1 h2 E7 V/ P- y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 S+ D+ [# W" P& E8 t
</div>
/ S% g& l6 R: w; X6 s5 f</body> ! W+ d( z! r5 O& s; r- b
</html> |
|
发表于 2007-12-8 14:55
| 