|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 ~; J0 u/ C) ?! x1 C
关键在于：max-width:780px;以及下面那行。
( k9 {6 v% K2 U: p2 [固定像素适应:8 h5 X! c0 K1 {
9 w7 M5 R) N% g' K% 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> 以下是引用片段：) {% f9 C7 n8 F0 i8 f$ H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + Y: `% u3 Q o0 X
<html xmlns="http://www.w3.org/1999/xhtml";>
3 H9 Z0 p2 i8 e<head>
% r6 y: A1 w4 K/ B<meta http-equiv="Content-Type" c />
" s+ _; I7 ? ^) m<title>css2.0 VS ie</title> # D/ v/ q* J. M5 f- y0 o; X
<style type="text/css"> " A3 q) N, C. I" U+ s
<!-- % J( e w9 q" |, b- x) ]' m! ^
body {
$ C7 t! X) k% t% x1 K' x6 Wfont-size: 12px;
$ S( g. f3 _' s! |, ]text-align: center;
/ E0 q2 E0 H- r6 u, W: ]+ t, umargin: 0px; 7 W" Q/ [. }' [; S2 K3 V) W, A: |
padding: 0px; ) F5 I' w6 Z7 W* w
} ; A, I' H+ C& E5 a5 r `5 E: o# X
#pic{ " \' X N: J2 r4 S* ^, h3 u E# C
margin:0 auto; ( D" w! s' @0 p0 h
width:800px;
5 y, b% ~( e. ], ^, Z9 o padding:0;
/ ?5 E3 Y4 Q; d4 Y/ E border:1px solid #333; ; ^* C7 x$ d6 O$ P0 D, ]
} 7 v# w' ?2 Z' j
#pic img{
- B) p# c( E$ y7 a max-width:780px; 8 k' G* |! Y, f$ ^5 Q% ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! n2 O g/ m+ j' jborder:1px dashed #000; $ S6 U* D& L: {
}
) ~" Y. d/ d3 S5 B; q3 T; a-->
, {9 c# ~) R& F% b' K! l</style> ; f7 u4 X% R: Y6 N# m$ O) Z
</head> & n( X; ]) T; }3 R/ F* v
<body>
2 z& v& x( o2 p( s2 M* M+ R<div id="pic"> 1 F$ \" j: m5 x0 r6 J; n, Y5 E: I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % q# o, {2 X7 t2 E4 h( ~5 e
</div>
8 A# |8 Z7 A6 S5 S</body>
' c+ T! U' V) ^2 h& I: S! r/ o</html> 1 g7 `" Q6 z0 d" w2 Y2 [
6 o+ v4 W, O3 v' f6 ~3 L, |百分比适应:% h& f$ R: w3 M$ J+ P1 `
以下是引用片段：
: p h% g' R% }5 D( v( r$ W& F<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 r& P+ i% s/ ?+ G: B
<html xmlns="http://www.w3.org/1999/xhtml";> 0 ^/ h8 i; x. i. H5 r; \" L
<head>
3 ^) d0 G# b: w5 c6 @6 x0 i/ u<meta http-equiv="Content-Type" c /> ( q6 r$ k% A* O q; z# n2 h7 L
<title>css2.0 VS ie</title>
* U* W4 }# x0 O9 Y; ~4 @<style type="text/css"> ( S) V0 O6 y5 x+ P3 q; C2 v- y
<!-- + m- H2 D( j; x$ Q5 @; \
body { 0 U. P- s* ?5 F) ]: j
font-size: 12px; + v F4 e( S% O1 v0 K) S' P1 z' G
text-align: center; ) Q4 J& m# T3 h7 ]
margin: 0px;
3 q b2 I; N2 |; q; E0 f- B9 cpadding: 0px; / j0 j2 |8 T4 O
}
9 a8 b: h: p- u#pic{
* [& ]2 U' [" Q; Q& S2 D margin:0 auto;
S' v% }1 S* m width:800px;
& K& H" I- H/ T padding:0;
) H6 Y K) i, r y. ]$ J5 T border:1px solid #333;
/ c6 }# o$ p) p H5 `! ~5 _4 B }
7 t8 m. ^% n5 I: A0 e: `#pic img{ 2 T' j+ ?1 S/ i7 W7 [7 c8 ^
max-width:780px; 3 s0 ^" e8 Z9 O4 g" ]2 n
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 H. T2 S: F) b" X& C. w( jborder:1px dashed #000; 9 V; S7 y0 x G$ H; W
} 1 G9 {$ _' _9 ]) p8 m( m d. o
-->
4 u& N- k! M* o9 q* r3 `</style>
( U: W* P: Z5 d# ^+ P</head>
- L2 J+ ^& M" {1 a6 E; m& I<body> 9 i& r! L( |# D7 R! E
<div id="pic">
, c2 X# J' l- V7 B3 \. n! r<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 b+ x6 M" _) [6 Y</div> + O8 q. p& q8 b) u8 G
</body> ' v. ]7 g% T7 U- z7 A& c. L
</html> |
|
发表于 2007-12-8 14:55
| 