|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14423
- 金币
- 2497
- 威望
- 1647
- 贡献
- 1445
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; G5 T9 |6 d6 B9 a6 b. @9 Q7 ]关键在于：max-width:780px;以及下面那行。5 t! S z7 \) L0 m0 _. f. S- J7 e
固定像素适应:
5 }$ Q) l1 W# n% _! j( n, I& x4 o# y- @- ~" w
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> 以下是引用片段：
, L* q5 c" S6 F: i<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ ]) V8 u( k* _3 } |3 ^8 r
<html xmlns="http://www.w3.org/1999/xhtml";> ) n6 i2 Q# n- ~$ w' ~/ B) ]
<head> u. n3 N/ L- b: z
<meta http-equiv="Content-Type" c />
+ }/ {- u9 T- a2 I- G<title>css2.0 VS ie</title>
. F' r- {$ X. @<style type="text/css">
6 {7 ]$ A+ p. l4 W w! w<!-- , j, u1 c T- u. Y, P' z
body {
. s1 u) W/ w$ n2 _ x' Y6 Rfont-size: 12px;
) r4 t( G% @' w: r* @text-align: center; 9 G3 ~7 Z2 K' r! `
margin: 0px; : \3 _& R. K' C4 R) J, A
padding: 0px;
4 K2 J$ p5 m" M8 I} 0 I& | ~" Z1 k; K4 I# U
#pic{
# K/ z) K9 U6 k margin:0 auto; . c3 P8 d' u6 L; r2 z R
width:800px;
) F# i1 q1 {$ p! c padding:0;
% E( l% `& N% E border:1px solid #333;
" r1 v) Y) s& U) c% F+ l/ X& |" G }
. D3 q! |2 [' t! z @3 U4 ^#pic img{ b; C1 y* |; _& O: m
max-width:780px; - d+ [ Q- U: o1 _: z, s
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 N1 v1 h6 U( M" c3 l8 b
border:1px dashed #000;
6 V# @+ B9 y8 z} B' [$ r2 J1 v! o
-->
+ n" ?! j" L7 Q( P" r6 b# g</style>
, }4 s1 Y+ J" Z( M) i5 N</head>
: B4 D2 k9 x6 P' ~<body> ! y: t0 c( x3 W, u( ]4 v7 l; P
<div id="pic"> - L9 {, k2 i/ [* h0 D
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 P# ~# f5 X5 R7 O3 B" X</div> ) W) q( H& I/ J9 k9 R
</body> 4 l$ _2 e9 o% s( _1 n6 I
</html> 1 p, B x- k& v
8 `# R+ y* D2 ^* I# G百分比适应:* f$ `* H1 K) S
以下是引用片段：0 C7 k9 O4 d2 y6 r! ~9 _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 n+ I B" m7 S1 T6 |/ s
<html xmlns="http://www.w3.org/1999/xhtml";> 8 l# [! }, _& |: }
<head>
8 M. c# U1 x1 P( b<meta http-equiv="Content-Type" c />
( \2 N4 t3 e+ C<title>css2.0 VS ie</title> ; M0 {: k5 U$ Q0 t/ Z
<style type="text/css">
6 A* W0 k" z* v# X$ w$ t<!-- / e$ m3 O! ?; M. G" v" c2 M% N
body { / J2 K8 a/ T! u; ~& m- Z* ~2 X3 ~% }0 p1 i
font-size: 12px; + ?" R; o- Y5 v, ?/ ]) S8 m
text-align: center;
. e8 l7 O/ i3 b; k b: r, m" k( t6 Bmargin: 0px;
C0 W0 r0 u5 r: t3 G- N2 I5 w3 ypadding: 0px; / f. n' H0 U1 ^ e3 a
} . j5 j; [4 d- X0 q* h% u6 f! I8 {, Q8 `
#pic{
z5 ~2 V* H* w2 H margin:0 auto; # U0 h/ E- U, x7 W
width:800px; 8 |) p: [$ t$ n$ s/ n! @. N# q
padding:0;
& X7 ^, M! x. C9 G" ? border:1px solid #333; ^$ A6 x o4 c. `' c
} # K# B+ J) u6 M
#pic img{
& u _# j7 ]1 t# N. u1 a max-width:780px; 5 R, {0 u! U! w# F. _: X; N! Y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 m U# a4 s4 z( nborder:1px dashed #000;
3 w7 R6 h8 e3 m% r7 f/ f) o}
: I) }* I, H* H# J. |# h--> - Q6 t3 m; X6 s
</style> - z l2 `3 }7 U3 a/ f3 S
</head>
9 ]2 _1 U3 | a4 M- |<body>
0 v J# t6 X, s- B6 \7 J6 F/ |<div id="pic"> 9 F( D( V, @2 h- W6 E
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 D4 q7 B1 U' m3 @
</div> " k# x$ C! \; m+ F" g
</body> 5 z y2 n- Z6 e9 _# i) ^ z# x
</html> |
|
发表于 2007-12-8 14:55
| 