|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: D( Z y/ `) Z5 J" c% g0 I关键在于：max-width:780px;以及下面那行。
$ l ~- |( z, u) v# x% Q; y5 B/ r固定像素适应:
. P2 S1 O$ X% k$ ? O' I! [1 o9 T9 e8 r: v2 z1 _. J
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> 以下是引用片段：7 `7 M _3 s5 h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> a8 w. M( V) k" E# r# d% \5 c
<html xmlns="http://www.w3.org/1999/xhtml";> , R/ B7 W4 r' P! r8 n* M: j# k
<head> 7 x3 b, C. ]+ f3 e
<meta http-equiv="Content-Type" c />
' K' o2 z, |! w5 {<title>css2.0 VS ie</title>
! Y2 k* j" i4 E<style type="text/css">
, d" ]/ m, D6 j6 j<!-- $ c9 } G, j3 G7 D7 A( r
body { G. A3 K/ G7 U" O5 |# L
font-size: 12px; 8 ^7 f( E2 ] P" a, R g
text-align: center; , u- F; E/ x4 ]$ U" D( [
margin: 0px; , O* r1 X4 l% D$ k- U. \# u7 B
padding: 0px; + g2 b1 b) X& u- r% }4 H* P
}
% p- z, I0 C! p( [* _% x* g#pic{ 2 E! N: q1 Z1 h& s6 A+ b
margin:0 auto; ( ^- ?+ f. i. B, ] R+ Y& M
width:800px; % v- ~2 M. s6 ^: e
padding:0; + I1 o) G8 i/ c% `! E: L
border:1px solid #333; p# h! N0 m- B9 R# C
} , T* o5 N1 X# B! ]5 \" h
#pic img{
2 } W' d0 ^. ?9 x, a) m max-width:780px; + r4 R+ Z3 Z9 b7 }2 H
width:expression(document.body.clientWidth > 780? "780px": "auto" );
. P! ? l c. B% R5 Pborder:1px dashed #000;
3 ^( D8 b% `" N( q; n3 W}
5 V1 ?' Y3 ?- k--> + F6 C3 R, [- T6 A+ R8 y
</style>
2 r, c) n1 a' `( F D. P( C" w</head>
8 u# s" k8 @; F- U" G<body> : j+ K; j, u6 Z5 X/ o9 y
<div id="pic">
( d4 y [% X# D, T2 i/ g<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * z/ [' ]4 W' s' h1 r# a9 ~( Y
</div> * u9 \- @; m5 r
</body> 9 K) a0 C. n! \- K/ m; i$ o/ |6 R5 L! {/ f
</html> 8 h& d$ b6 A6 l1 v: }8 @
, V2 t4 |& ]% G; F* o, u
百分比适应:
& `3 b1 ^6 o" N5 D8 G# H8 t以下是引用片段：
- W# F- E" e. l! s# `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# z. V+ Y& j5 c* y: }1 _<html xmlns="http://www.w3.org/1999/xhtml";>
p4 Z. K' u; e6 Q2 Q<head> ( S$ X; Y& q- h- b. L
<meta http-equiv="Content-Type" c /> ; U/ a( p3 g% N: _3 a3 U0 `3 w, A
<title>css2.0 VS ie</title>
2 A6 B. U" e, N( s<style type="text/css">
; T Y3 G3 s" M! ^. Q6 F<!-- 8 h$ P' p* z& L/ f$ {3 Q6 h& ^
body {
% T2 X. ^4 O& ]1 [0 C+ t5 B _' h7 yfont-size: 12px;
) W0 w8 a- {, K9 [8 Xtext-align: center; # ]4 Y, T1 _# s' \
margin: 0px;
1 Z1 J( M8 R9 y' N; q- mpadding: 0px;
. P0 ~+ S8 n! N# m) j}
8 v- G( u+ e0 H/ G2 I# S1 j, q3 b#pic{ 5 A0 x H" p, P$ y5 \5 w' `0 x
margin:0 auto; % f% j$ b, i1 ?, @
width:800px;
0 N9 J( \% o9 F1 z0 d/ b3 s. p padding:0;
4 O6 N. m* s4 @ border:1px solid #333; $ u, b( |* p0 B d( C/ w+ k f( a7 V& q
}
. k( U' A9 ^ |# ^. |5 ^#pic img{
' ?* V% D) X+ h9 c! I1 r max-width:780px;
8 Y# { x# b3 F. T& G* T+ Vwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 3 ], L7 `8 `- N; I5 X2 P
border:1px dashed #000;
. N$ z w. @2 g9 X2 K. h} % @' q8 ]* W" ?' R0 g/ g9 B
-->
, g0 L# j V# Z. X</style>
2 [6 t/ W( j' h+ L0 i; a8 }</head> . R/ e& N0 r7 N1 t/ ]6 n. _- C. ]
<body>
( K4 y B2 X7 e7 S" t U7 P<div id="pic"> . l* }8 h5 ~3 T: n" M1 {
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 |5 R. v: ?( F h4 j$ l
</div> 1 F7 x& p2 {0 H9 m6 q
</body>
+ y8 _/ R" S* e9 y0 ] b. L0 g* f</html> |
|
发表于 2007-12-8 14:55
| 