|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14367
- 金币
- 2469
- 威望
- 1647
- 贡献
- 1417
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- B+ h% k- A u( J5 Y |关键在于：max-width:780px;以及下面那行。
3 Z8 F i# L$ Y x固定像素适应:
3 R) G/ O/ d g6 ]* ]
& o! c1 e$ M0 V S* P 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> 以下是引用片段：) L( t* T9 d! K9 h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
@1 W) i) u0 |( h( G. r: p8 ]& j<html xmlns="http://www.w3.org/1999/xhtml";>
" X8 W! R7 K5 {) z3 _% ~6 w! C- G<head>
5 ]# Y. l3 H2 ~6 t+ y9 @<meta http-equiv="Content-Type" c /> b$ l* M0 R- K% L& l0 l
<title>css2.0 VS ie</title> 8 k; C+ V9 `7 G$ L. ]7 W+ q
<style type="text/css"> ! X! ^# [1 }3 F' G. K) t6 c
<!--
7 m0 `: w; \, K9 jbody {
* _) l3 R2 j; \* g7 j3 o3 D& r ~font-size: 12px; 8 A2 u% R( v0 X5 c1 Y
text-align: center; 2 G5 F, h3 f0 {
margin: 0px; K8 d7 y( s* F: D
padding: 0px; # Z3 O7 Q; Z s, i2 {
} ' Y" A6 S$ }6 d7 l8 Y; ]! R
#pic{ & |) P- ?1 K3 P( ]
margin:0 auto; + f2 I5 }% J$ U9 W
width:800px; * b/ a7 y2 W+ _( N1 V7 x3 J l
padding:0;
, @3 ~3 w2 G: c/ M5 r* o border:1px solid #333; 5 n. ~8 w ^5 r
}
; _7 _5 |# U ~% T7 e; l) B#pic img{
5 Q F! K* b2 K8 b+ } max-width:780px; 1 D. }- K' M% N( A, ]# W
width:expression(document.body.clientWidth > 780? "780px": "auto" ); . F" J1 n( Y% p0 g2 v
border:1px dashed #000;
" B- E2 @3 \6 _+ m5 e- G' M# |} $ q: e9 i2 F; U" g5 `) L0 h, c
-->
% k T9 a% f) L$ W</style>
, D' ^( u/ @$ S' t</head>
3 A0 A/ S' z: N/ @- l% k<body>
$ e6 h( A |6 U; U<div id="pic"> 7 n. e8 p/ W& V" ^+ R
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 O+ S* e1 f3 C</div> $ \# a0 `6 W4 [+ r9 k5 b
</body> , u2 I* C; X, ]/ _9 y' X
</html> . E" K# R3 c. r. M
6 Z! J F8 J& [5 C4 c R百分比适应:3 o. d5 H' z* n' l5 A- i- m7 ~
以下是引用片段：
$ l0 o1 S; l. x<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
B5 M7 Q$ J3 s" Q$ P, C# }<html xmlns="http://www.w3.org/1999/xhtml";> 8 ? \4 z- G" m/ E, J$ i* D
<head> ) p: V( g9 G$ z+ A0 j9 x8 C
<meta http-equiv="Content-Type" c /> 2 A5 X4 S% U$ Z& I# u6 M
<title>css2.0 VS ie</title>
8 _3 Z$ v/ k, W- C<style type="text/css">
% w+ I' Z6 I8 a* p% j l N0 I<!--
0 d' I6 Y& a' u1 d7 Pbody { 4 y! f9 k" N9 g. V& `
font-size: 12px; 1 |+ Y2 C2 b1 A3 F7 `; A7 k, y. c
text-align: center;
+ }" g3 L# h5 {% n) imargin: 0px; * h+ h! Y& f& ?& |8 x1 a. o
padding: 0px; 5 e6 `9 ^& h' Z# d5 o2 w
}
! {, j3 ]" B$ Z+ o1 @' A( U2 A#pic{
6 c5 ^4 W4 X( {8 V margin:0 auto; . x3 a% l3 T+ E' H( d
width:800px;
2 z( n" U& U; Z6 z padding:0; 0 ~+ g9 j+ N2 I+ P* m0 o
border:1px solid #333;
& a2 B6 W& z7 i Q } . _+ `( h0 Z9 f# e
#pic img{
3 C5 K8 g; T& Q. ~ max-width:780px;
/ o& L# F$ E4 b* Bwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 2 B6 B) ?1 ~$ k
border:1px dashed #000;
$ _5 g5 K- t, t8 {) _# I% x}
. O. ^0 S5 e2 D: H--> . t9 c" c8 k8 d1 I- X9 ]% g
</style> % a* N, X, M2 G+ i# w! M4 I- t
</head> # Q) _: ^" O. t. y* w$ \0 j
<body>
' P4 ]- n0 P* Z# R9 V<div id="pic"> e$ }: L1 w" y; Q5 g* U
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : Q( V8 E+ Z$ `" u: f* w- g# S6 M
</div> : ~, i3 o# r7 N' v3 }. H! c: n
</body>
+ J& q5 N3 ], z* |</html> |
|
发表于 2007-12-8 14:55
| 