|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 o0 t3 ~0 Z) K, w8 P6 R关键在于：max-width:780px;以及下面那行。7 E5 \' d0 g" i3 x/ b
固定像素适应:/ \$ o9 Y7 ?9 C, {
% y& G: l! t" G. A( x
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> 以下是引用片段：
" J4 P+ K: [" O; d<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 u1 _+ B7 c. G& \8 [/ A- ^% p2 a<html xmlns="http://www.w3.org/1999/xhtml";> . ]' W. v& Y9 J- n& X7 L8 u
<head>
# x1 [: ^& @/ s+ W$ H/ z2 i! J<meta http-equiv="Content-Type" c />
( `1 ]0 X3 j0 M8 H" U0 {/ G<title>css2.0 VS ie</title>
% \( r7 D: U/ b: ^$ n& L! ^<style type="text/css"> 3 K( z8 O9 L4 r9 T4 M0 s, t( `
<!--
% ^5 ^4 N9 f- }body {
2 _& F8 B: D1 b0 W4 l. afont-size: 12px; + O" Z0 P( ?: y+ ]' s
text-align: center;
' v; P. i. u! j3 }& m* a5 [) Omargin: 0px; w; K0 p+ F: S" k# l8 }
padding: 0px; & e1 L% X; c5 Z! q% {* \
} + B) `( Z/ l# r k1 d
#pic{ ; I. V% S5 U" I
margin:0 auto;
6 F* X3 O- Y/ n4 q width:800px; 9 L" h1 J6 o, K
padding:0;
! g4 n5 w$ L0 c3 h4 Q( P& O border:1px solid #333;
, O; t0 c5 c" H9 h: B' A+ H0 L } 5 w7 @$ @7 v7 l4 x/ o' `# R3 i: P! M
#pic img{
4 f% ?- P7 D/ N) {' n max-width:780px;
' G$ S2 M# X- Fwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 [, L0 e. F; d! t" O
border:1px dashed #000; , }( I3 o# c6 B- @' W
}
! t. o5 m! q5 t" }' T$ T0 N-->
2 W! d/ \) k+ N, S</style> 8 H+ o7 A% o) t* r4 y
</head> % a8 _$ m2 M9 c2 d
<body> ; F \( m2 j: U4 w
<div id="pic">
% e5 I. x- u& F/ U/ ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / E0 ^7 [4 G* c1 h K- Y% w
</div> : o" G" L. ]1 U! N
</body>
) {8 i' D4 ]+ [; H% q, n</html> * V0 R; U) E2 r0 B+ t
& k! B# D6 B: N8 h5 c3 Z百分比适应:
5 o, n4 j9 x; n. r$ {! R以下是引用片段：$ q4 H/ B$ {' [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( D) Q3 F% U( k& [! f<html xmlns="http://www.w3.org/1999/xhtml";> ; g$ z9 X* H" R% J# B
<head>
7 ~/ c5 E6 a I<meta http-equiv="Content-Type" c />
" o2 a9 y8 r# h! u<title>css2.0 VS ie</title>
0 f# D) Q! A z5 \1 V/ R+ |% y<style type="text/css"> 0 j2 n$ A6 w1 y$ o) @ u# B0 v; U
<!-- , V1 c) f. G* Z* F
body { ( U+ y8 J5 G+ g& `+ s4 }% I s
font-size: 12px; + |/ A$ I* y& \' h/ f# u
text-align: center;
" T9 K( G& m0 e6 g2 ?' A& fmargin: 0px; ! V% |0 X+ I4 y* W0 d
padding: 0px;
6 x, J9 v& H' I- X6 }4 o3 c} 4 e' [ }$ Y* Y# {7 l8 e6 O( v
#pic{ ' `! A2 h* R8 U/ g) t
margin:0 auto; - w9 {7 I- j% j: N1 Q; y
width:800px; / J& Z* {& X6 N$ e; A5 Z
padding:0; 5 s1 d7 Y1 i+ w+ Q
border:1px solid #333; 8 c3 T& a) q: Y4 A+ |% @! V/ e
} 3 m4 r) L6 X$ M$ J
#pic img{ 6 F6 r: ]" M. M
max-width:780px;
+ C* B- j8 m! x, h) K7 _9 A( Swidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 z0 B' g6 @8 H/ z; a9 h7 aborder:1px dashed #000; ( f% _0 L( v2 T6 B( \4 B
}
% b# k3 w, ]) L. N: Z--> - v+ O6 {+ N0 r9 I
</style> 0 ^( t8 b- v( D
</head>
5 q4 s% s% F; X8 H<body>
9 @/ x/ C1 p2 \9 O<div id="pic">
1 e) d6 |0 W. M$ u* ?1 f5 w<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( ]+ D7 @0 W; v$ g/ A
</div>
9 v% b; I; ?9 R3 S</body>
! N: S' [6 V/ |8 x- q</html> |
|
发表于 2007-12-8 14:55
| 