|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
8 M) ~# j' K5 p/ ]/ j3 M8 Q关键在于：max-width:780px;以及下面那行。/ L7 F, H6 Z# G; k% A
固定像素适应:. i" j- Q$ X$ J$ |2 K& y3 ]" _
: o; _' p( g2 |9 k. Bdotted; 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> 以下是引用片段：
8 F: K# b: d9 g2 _* J( x<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' R u$ }6 n$ m- \% c+ {1 ~- {3 A1 P
<html xmlns="http://www.w3.org/1999/xhtml";>
. `& D9 i- f# g3 F<head> 1 [/ o$ ]8 M: Y# w! t9 S6 j
<meta http-equiv="Content-Type" c />
" s7 N/ b U. T" V) K! i<title>css2.0 VS ie</title>
2 T3 O* }. m& I c3 a<style type="text/css">
# g9 a& M* v2 Z- q<!-- . f( \! X& {& S4 U6 r
body { 5 [. @; m8 D2 a- o5 ~9 z% r5 G
font-size: 12px; 3 o4 E9 `! l# J# X t7 J! h
text-align: center;
1 X3 M2 G, T7 Bmargin: 0px; ; {6 n7 G" N& T, n* n( M$ V3 R
padding: 0px;
: B' b( B" j/ L+ {4 R3 F) }} 6 `2 D& P' o) F
#pic{ 9 i& |# a3 Z6 u
margin:0 auto; ( n" D6 L( b( q9 a7 _4 V w, \
width:800px; % {" e2 ^( l& F( d( H/ [
padding:0;
2 U+ l9 e, K+ P5 D7 D border:1px solid #333; % F( u* K; c* y9 O1 [
}
' y0 M9 _0 p$ F/ r" ^5 l#pic img{
( w) v1 v. e& \ max-width:780px;
- [3 E1 C m3 P0 r Ywidth:expression(document.body.clientWidth > 780? "780px": "auto" );
G5 H! c2 p" o- Lborder:1px dashed #000;
/ O' D# u8 `, S+ l/ A}
( i1 v/ c3 a2 t; P; s0 h+ c--> ( {1 d0 i7 M+ o6 X6 J& A, t
</style>
% X, D" }6 x: j5 d8 @0 o# I2 `; D</head>
0 v9 B: Y/ u0 V9 t7 w<body> 1 i0 Z6 e/ d5 I' H e
<div id="pic">
1 G2 h, b& x! n! a) w. U7 t<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& |: V2 d( w! o0 c# ~1 B</div> - P( }4 p1 g, _2 U) E
</body>
% l- E$ V1 H8 g2 f1 C `, u U</html>
1 w" c) q& P* b* x1 u3 ~1 n2 }8 p! @9 Q0 Y% l
百分比适应:( g1 \& p* W% K: B7 u
以下是引用片段：
1 k" u, {3 j9 U5 F5 F0 n" P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 y9 P& h3 D/ T0 j8 z8 g2 u' W R
<html xmlns="http://www.w3.org/1999/xhtml";>
7 M4 L( s/ I" `$ m$ _<head>
- K; ?# d7 c, n+ ]; e, } ?1 b<meta http-equiv="Content-Type" c /> 4 v+ o5 N4 x# h% s
<title>css2.0 VS ie</title> 7 ^( v% V# J5 E
<style type="text/css"> " t1 y4 T/ Q2 x8 E* ?1 ?
<!--
1 Y0 b& ~! B) u+ F) wbody { ! }0 t* K/ G( i8 e) t
font-size: 12px; 0 X$ {( F- C& Y- @' R& J/ [2 R w$ G
text-align: center; ) }* f. a5 m- l# B& x5 g
margin: 0px; : \, F, e- ^5 o! v; m% u, o( \
padding: 0px; - K" P* O# d2 @8 N2 s& ]6 L3 L
} ( u. n( T7 f+ f# v( E) \. u
#pic{
* q* v4 _ y( W6 i5 s- @ margin:0 auto;
4 B' Z- U! X: T# T$ n; x width:800px; 0 C# U5 f) B1 v, I$ ~- J& {$ a
padding:0; ! ~; r7 j p0 }7 v! ?) d: _& ^7 W. o
border:1px solid #333;
" b. H0 W6 f; p4 V: I3 G, j }
0 l D$ y. W0 o9 }( r: u& B$ P& P( t, x#pic img{ 2 i' j% B( f' y6 F! V
max-width:780px;
2 O8 o l6 }/ J8 c" j0 Bwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); * Z/ p+ G# r* d* U
border:1px dashed #000; : [3 `. ~6 \3 m3 h8 h; I
}
/ u, P8 Y7 Q: Q9 I6 Q--> 6 c' r! i8 Z$ N
</style> ! H" f4 l& t7 X
</head> 4 |& c- K5 b! U, y
<body>
( ]1 R$ {& g$ a/ t. U2 U<div id="pic"> ( d H. w9 d6 P# i2 ^- r6 w
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 D( M$ Z* }. F% g" B
</div> - i" q5 K# n& D0 j0 D0 o
</body> ! g# j4 m5 h$ {; E$ v/ ]2 h
</html> |
|
发表于 2007-12-8 14:55
| 