|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) p5 [4 J0 a( u Z1 _) M9 r关键在于：max-width:780px;以及下面那行。
}( _6 x5 ?4 R- d固定像素适应:
% N$ ?+ J( f% U9 J- K( j
! z2 {5 ~# C4 H3 Sdotted; 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> 以下是引用片段：6 F4 q9 G+ q3 p7 z; U- H/ x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' s' F4 Y$ j: A4 G: q: h<html xmlns="http://www.w3.org/1999/xhtml";>
# s4 y* S+ M; f# r4 n<head>
( I. {3 a( v! j$ i) g<meta http-equiv="Content-Type" c /> : Z1 {& q G" L& }! H
<title>css2.0 VS ie</title> - j6 u6 \3 q8 p' k1 k
<style type="text/css">
; u; x3 k- D5 I) m<!--
" X7 Q; R3 \; B' _" Rbody { t- ^9 t( k: M: z2 {$ n& H6 d( g; \
font-size: 12px;
' a% n" ~( A* _6 Qtext-align: center; ( G( Y$ E% s( v# W% H
margin: 0px;
0 z; @4 w+ J! F" gpadding: 0px; 3 s6 d0 s5 j5 [( X
}
2 k* x, t3 }% `8 j0 ^$ t#pic{ p+ n u' K+ D: y$ \
margin:0 auto; 5 s' W0 c# T) `4 S Q }/ u( s* }
width:800px; / e5 V1 H$ z/ }' _/ B* \
padding:0;
9 ^* u% ?1 N8 F- M8 G, P border:1px solid #333; % ~1 ~' x. ~4 U2 Q
} 2 X" `+ C8 Q9 y# d. D- c
#pic img{
6 h8 V* q6 z/ g7 I5 G$ K" Z9 G' s max-width:780px;
0 x: |2 M: H6 ?( ]width:expression(document.body.clientWidth > 780? "780px": "auto" ); 4 E/ B8 v6 D6 L5 J" l
border:1px dashed #000; % _' D \5 `, W
}
_8 c+ A# h( k t, q/ Q-->
6 O( G1 n' f. A7 m</style>
$ L1 p! ]( b# U! B" W* d2 s</head>
% }+ i2 b* Q8 O, Q" w2 B<body>
& X& u5 X! e" I5 u p<div id="pic">
/ ~+ C2 a3 f- a" _- t4 G<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) _+ a( r1 W, n+ S5 i) J9 U9 L
</div>
. A/ D9 K( L" }! j2 H+ |</body>
1 `, E, A* L+ q( w</html> 6 A/ k) ?' u0 J8 z
# ^; u6 q/ p* R
百分比适应:& h: V( ~3 v6 Y7 q! a0 `
以下是引用片段：" z" j% C, o" r; K$ ^) `0 R/ ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 y% B; |5 Z. [- ?6 j! M<html xmlns="http://www.w3.org/1999/xhtml";>
~8 g, i( G; I5 H! w5 ]<head>
9 i8 a4 B5 Z7 A, G, Q' B<meta http-equiv="Content-Type" c /> / x6 h& m4 L! y" L: W
<title>css2.0 VS ie</title> + t% Y- s5 p: ~1 m& G. M& Q
<style type="text/css">
0 Q. Y7 S) p5 @0 n1 C3 n3 E<!--
( ^0 b$ \; \+ C7 t8 S& `body {
% O) U0 K0 p! G# z) } @' Gfont-size: 12px; 5 z2 U/ O9 g- E
text-align: center; - s1 r' Y, L' f& N. Z" [
margin: 0px;
. [) z1 n( ?. @padding: 0px;
: s, ]& @- b) S2 t$ u" [} Q- ^. w" E: }/ b/ r! [' g' P
#pic{
3 a; h A3 t; P( {4 h( o' M4 D4 f margin:0 auto;
# ~/ @0 W5 Z" v U9 _2 a5 |; H width:800px;
% ]( F3 o/ l3 R+ Q1 Y padding:0;
3 Z$ \, N+ k8 ^0 I% K! c border:1px solid #333;
/ ^1 L7 ~& Z3 k }
$ @" c7 C) n. C z9 U#pic img{ % }0 ?$ Y# }7 V* P
max-width:780px;
) _) A4 s) X' X7 v9 F! Y; i- \1 W, Twidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ! _) h( @, p3 Y( R3 j2 Y
border:1px dashed #000; 3 h; t6 Y) a6 R7 s/ N/ w
}
2 N3 s& g1 q! Z--> 7 H& m2 U4 Q) I, k
</style>
. g8 _, e; @3 l! }5 D, p4 {</head>
* Q/ i' j/ [9 d& ~# R<body>
( K: U! x0 x# p7 u- Q<div id="pic">
' M N# f7 k4 B5 H2 ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 A& {7 ?* M8 b5 `. I0 M</div>
1 U) y9 m: C- L' e8 j+ j</body> 6 C& A3 X+ Q! |, U/ W1 ]% F
</html> |
|
发表于 2007-12-8 14:55
| 