|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14161
- 金币
- 2371
- 威望
- 1647
- 贡献
- 1319
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 f! h f7 n; V4 J! r关键在于：max-width:780px;以及下面那行。
. x7 N [ Q8 c# o8 r% ?& F t; r7 ?固定像素适应:
3 u/ w! A/ _( r* x0 Q$ W+ z; b1 y$ u, {" t9 g3 n; @" _0 K
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> 以下是引用片段：/ u( y& }2 l, G X/ s3 D" ?0 j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 D S8 [6 F$ ^, ~0 @2 |
<html xmlns="http://www.w3.org/1999/xhtml";> 8 x1 a8 s8 F Q$ J4 t& e$ E0 ]3 X2 ]
<head> 9 S6 I8 |( O& ?) V& S$ r
<meta http-equiv="Content-Type" c />
! w' C- V/ t0 S4 D+ s3 s& H9 }<title>css2.0 VS ie</title> 6 {: j/ Q1 }0 l( C6 v- k$ Q
<style type="text/css">
I7 a# e! g4 ]4 |<!-- + f6 J$ W# [' {* \3 z
body {
7 Q( {7 ?! G2 T( }* Z, }font-size: 12px; ) y. V X3 S5 O
text-align: center;
' I) {7 P' B# m4 _% f' t8 nmargin: 0px; ! u: W d6 Z7 U, t$ T2 E; q8 }) ?& H
padding: 0px; $ X- n0 b$ d: l( \) P; m2 a8 w
}
+ ^& Q6 u0 y; u; w0 ?% g2 M& {#pic{
/ Q9 B+ ^. u. W9 p; ^* m6 i margin:0 auto;
0 I6 t" y4 l( V, k- @7 d width:800px;
0 E7 A; \$ }) e# o padding:0;
. b- h5 _2 q U2 { border:1px solid #333;
# E# I7 G) @" l! B }
l0 `! K+ L. }7 A1 ^#pic img{
3 i# _; S) h' j: z h max-width:780px; ; J- |4 Y- ?! d2 W+ f/ w; x! C1 s
width:expression(document.body.clientWidth > 780? "780px": "auto" ); - l- D. D# Y2 A' a5 \( t8 ^, ~% x
border:1px dashed #000; 7 W: e' t2 a4 p
}
+ h* X+ c4 @5 V- H7 L' v( X--> " i/ R" z9 [! F* `
</style> 3 y' L& j" q" m' i6 `
</head> , V" s. c. C' E. z: h) m
<body>
! J2 B( Q3 d3 q; v<div id="pic">
* V+ t6 |0 o0 g ~% p! h<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * D6 `" a u) f
</div>
5 ?$ J' D0 c: t' U$ G1 O( ^/ v</body> : Y# x. N; q( S7 y
</html> 5 O9 N/ s) f! n p3 M5 d$ T0 c
7 z' L+ k1 P5 C0 }% b5 ^百分比适应:9 C8 E( O! [1 ]) B8 e
以下是引用片段：9 t% }2 Q. o0 N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ G) ?# d2 d: d* S7 Y( K; D# u' d! {, V<html xmlns="http://www.w3.org/1999/xhtml";>
3 D# L2 n U- K5 u/ L0 C) t' ^<head> 7 v% K5 f4 r, m
<meta http-equiv="Content-Type" c />
" p. ]9 }* _ k w+ g2 L! m<title>css2.0 VS ie</title>
" k& |) L# h) L7 |<style type="text/css">
% Y" k6 s0 P% ~<!-- # G5 h0 g/ B% d' v: ]5 U
body {
U, O" u3 r5 Hfont-size: 12px;
' p8 G* _. H- M4 V/ ktext-align: center;
: y3 g" G ~1 O( h" f/ ?+ bmargin: 0px;
5 d) M( }3 J3 w5 \2 R) x2 p5 upadding: 0px; H. b& a2 G2 D2 c6 n8 g4 {
}
4 A2 `- S, I$ H! n% F) q# Q#pic{
1 i2 M3 {: v# o" ^% s# R% D( s0 W margin:0 auto; ' B" Z8 o7 n2 Q1 ]: G, \/ ^+ ^/ E
width:800px;
! C" A/ i0 d% r, [, b padding:0;
5 U5 ?6 S' }4 ~9 |6 g; G border:1px solid #333;
8 u) d/ m2 P+ H9 j" j }
7 i0 M e; b5 T% I#pic img{ % D7 T9 c/ b) L; L- W0 g
max-width:780px; & x8 W7 S. r; J$ w7 `% x
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( t" z9 _$ I% K( H2 d) t& v. uborder:1px dashed #000;
' w- _5 |- A/ Y}
- E3 k6 g$ q. c3 {& ]+ b-->
v* }$ k8 [7 W- s6 k</style>
: O& \5 c3 |5 D6 J+ q0 ]9 H</head> ! z. f; i2 k) k& K
<body> 3 d. {' b2 e h7 Y4 S/ e
<div id="pic"> ) M0 r( M# E( |& m
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 w( q0 v; ?; H; ~</div>
+ u0 t& E) v- t# A% s9 o& E</body> * n) u2 ^. \3 |: S5 ^
</html> |
|
发表于 2007-12-8 14:55
| 