|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14327
- 金币
- 2449
- 威望
- 1647
- 贡献
- 1397
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。+ v& t. e: e5 ^
关键在于：max-width:780px;以及下面那行。0 t& |0 \' K6 Y$ K0 g5 Y8 y
固定像素适应:" v% n% j- B2 R7 }: r9 g
$ _# {0 M: j2 B# T( Mdotted; 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> 以下是引用片段：
9 Q& u7 a7 k+ H* W$ l: k<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + p4 N2 A2 }% D( j2 ~
<html xmlns="http://www.w3.org/1999/xhtml";> * ~8 ?* }. n/ d0 R* m% X
<head> $ h9 U- o: | @; k) v4 ?
<meta http-equiv="Content-Type" c />
7 Y2 r9 S1 ]& M3 J6 l<title>css2.0 VS ie</title> " ^0 n! S; Y7 Z: o& L" x$ E. g
<style type="text/css">
7 d E& O' E" X1 n9 z+ ~! O<!--
+ C$ f& d3 p: t$ O+ _4 e2 W1 N1 obody { & c. G6 U( e9 y
font-size: 12px; - B2 D9 a3 \) W) ]: z" S- ? R( s
text-align: center;
& [3 K8 e7 Y3 Zmargin: 0px; # O0 K* G' T1 q4 t$ h( V
padding: 0px; 0 F {+ _" J* ]1 X3 @# r+ V- L
}
3 M @ Z& r. s/ _ ?* ]$ c' _#pic{
/ B% `) c9 T# N/ q, u+ H0 e margin:0 auto;
1 f% ?/ ?# O- c o width:800px; 6 C" ^6 D. k& K" I v$ ~9 e
padding:0;
" |% x2 ]- o/ h9 d border:1px solid #333; ; i2 G7 c! k6 j: u- Q5 Y- }
} 9 k1 m- t& n& w
#pic img{
5 c6 c0 a; h, k9 T: e max-width:780px; 7 H5 a" f* T" ~% I& B! }" |. n
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 Y. t5 M5 D7 B8 w$ F
border:1px dashed #000;
) W$ L4 N3 I) r m}
h5 j* E3 I" U/ O--> ) P# w& m6 ]( j) o/ }. q* k
</style> ( e2 \" v Y8 z' W7 V
</head> 1 U* H; Q0 R) [& ^. G1 C- @
<body> ) W) y+ `0 x# J- I( {: k) E% \/ m
<div id="pic">
) X! A2 M2 X( w, k5 @; A- [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 r) N. D8 I% E$ V! ?</div>
7 X- ~( y- y! ^; U# x$ r2 T</body> 1 a$ T* J* x2 ~3 Y* d, e0 f a
</html> 1 m6 c4 J8 w2 G
0 |: o" h+ v3 \, u4 v' B百分比适应:
3 i5 D2 J V- x2 g" y& h+ R以下是引用片段：! l% Q3 ~! i& E: T9 o
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! h: ^3 W% y+ j' Z
<html xmlns="http://www.w3.org/1999/xhtml";> 4 c. Q0 q2 R. ?$ |' p9 [
<head> # M7 P1 ]% o/ A6 F, N% z: L- s
<meta http-equiv="Content-Type" c /> " o5 M( c( N& k1 Q! H
<title>css2.0 VS ie</title> ) l0 [7 h1 U# {% `: X6 P! \
<style type="text/css"> , V/ |) W4 V5 Z/ q7 @: x
<!-- ) k1 d: ?: S7 h, p9 t: @. S' w3 E- J
body {
9 a# n2 `% a1 Q6 bfont-size: 12px; * W( _3 N1 ]) F' [2 U9 c
text-align: center;
6 }) o& p( D4 `* `+ W. `margin: 0px; " N$ `, n2 K- v/ z1 v: I
padding: 0px;
6 q* p' c) ?/ Y7 `" M: R}
; \6 `! g# Q/ ~#pic{
$ `2 K" o# D; v0 O5 [ margin:0 auto;
* N3 Q0 `, ~7 |0 ]1 I* B width:800px; 4 k! U" G, u+ f# F) `9 s) e+ Y
padding:0; ! K3 i8 i Z A8 i( t- m
border:1px solid #333;
; M; _/ q( q7 i } 9 Y8 j6 |* m& ^" x, s4 e+ {
#pic img{
+ r3 j# V# c q* m! P8 M max-width:780px; # Y: q1 p* v" M, F/ D2 C, a
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : U9 o0 [1 @9 p. P2 _8 d
border:1px dashed #000;
* V' T: a# F% t: A} S( x5 _# l! _% S( J3 b3 P
-->
9 R# Z" U1 Z/ X/ [4 g4 J</style> + L3 b' v9 C q2 E% x
</head>
' S5 f" G* z0 m<body> ; u) J# g5 ~+ r* b
<div id="pic"> + C/ S( e; @' ]5 w
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 ~6 _8 H, s. \ I/ K* T3 ]
</div>
0 Q4 |! e+ }0 S+ K& r/ E! X</body>
. n( g/ |9 d( V, i- }4 [</html> |
|
发表于 2007-12-8 14:55
| 