|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14433
- 金币
- 2502
- 威望
- 1647
- 贡献
- 1450
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 P% i" B. }6 O: X% r
关键在于：max-width:780px;以及下面那行。
9 [: d, H6 s0 ^- f$ i; U$ I2 u固定像素适应:
0 V# S% [4 [7 B e3 A4 x* {. v; n- V. Z. o
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> 以下是引用片段：
, h0 R5 T& k8 B4 t( ^' W<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 [) U3 C( P* |) z, e/ S4 P
<html xmlns="http://www.w3.org/1999/xhtml";> 2 r4 v( h' H+ J% _& z |$ |
<head> ( ] U! R9 l" S, e" l5 ^5 y2 D
<meta http-equiv="Content-Type" c />
( j p z+ b5 K+ k Y' H6 Y$ ^& m<title>css2.0 VS ie</title> ( m1 L) @0 R6 I; M% }
<style type="text/css">
h. x m) X$ w8 g<!-- 9 w# Z3 u; S2 i7 d( }( |: V
body {
- y3 R1 c% i1 l- l& k$ bfont-size: 12px;
! a% b$ V' L! E) ptext-align: center;
/ w/ L- s5 B7 m ^. Q) q2 Q( Pmargin: 0px; 9 g7 K" ^9 v2 d1 j
padding: 0px;
9 a( k% Q1 z6 p: d% U: R}
/ F/ v4 k6 n- f" E7 S; z2 W+ k#pic{ ; |5 R# Q3 k; C. g4 x: s
margin:0 auto;
) s& G: d: |+ y" O+ M width:800px; 1 e: F9 {( o4 k' f q# F
padding:0; 2 ^2 w1 e- b$ V& ^9 r3 ^
border:1px solid #333; : s+ S0 I3 N5 z2 c) v' w
} 0 M& h" y( Q- a: n# S
#pic img{
& Y5 k. \, F& Q9 I% V max-width:780px; : s C8 [% F% k) L/ g, c- ~/ [% N
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 c2 d e* c0 [& T' c' w: c
border:1px dashed #000; / s# L5 U; ^1 U9 S
} 6 N! G( ~8 H* y; w* J6 h) N. H
-->
4 L( I; \4 R7 O, |* C</style> / C! I0 q/ v/ G' w
</head> 5 Q9 g6 }% o4 T- n9 Z+ V0 O
<body> 5 s3 Q0 v9 W$ g9 B5 v: _5 G
<div id="pic">
% Z6 x- m" Q1 T; z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" `( K/ ?$ i& D m</div>
2 K ~8 B/ d6 {+ f8 t7 b</body>
* b1 K1 V& n9 R2 r, F$ g</html> * c1 C2 f" d D2 v' H' `
1 R( W9 M; ^7 q+ s
百分比适应:: `3 }8 {& D* O' f' O
以下是引用片段：# o& p7 V+ y u2 a! R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: \( Y9 y3 B5 O g# \9 w5 R4 {4 d<html xmlns="http://www.w3.org/1999/xhtml";>
+ Q6 t0 A1 R6 p0 y<head> 2 r9 H1 P4 w4 \4 w9 {. B
<meta http-equiv="Content-Type" c />
, Q9 S8 \, V( n, Z! @<title>css2.0 VS ie</title> - w' I& h5 Y% O5 g7 ?: h& f, c
<style type="text/css">
/ e9 O. K x# {$ g/ Q) u2 |<!--
/ d6 ^4 D4 @. D% |. p( S4 Vbody {
( j& i! H" @* n1 dfont-size: 12px; # Y" v# T. {3 j& y5 U
text-align: center; + W5 B% Z5 X! g+ W/ w$ w
margin: 0px; " D. u) a: j" V9 p& Q
padding: 0px;
% t2 U" E6 D w* `3 X$ ~! P} - c* G4 G+ F5 a9 b
#pic{ . y! C3 E8 y2 |; q) Z1 q
margin:0 auto;
3 J6 J& M, q3 S$ ^ width:800px;
. z8 C% H, b/ g/ F& B: r) B padding:0; 2 {4 q; p" |" n# U6 |
border:1px solid #333; 2 ]0 J0 {# Z, I
}
% w7 m: D; m2 p7 u4 u0 L#pic img{
/ p8 j. p+ l: D% l+ w max-width:780px; 4 Q& T( M0 j; Z4 Q: H3 Y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 8 p: H, j! |5 m5 Y9 s
border:1px dashed #000;
& B, W/ H+ r- ?3 q}
' B$ \% u7 v- E1 V. Q4 }, x8 h8 I-->
: j! v X( `" p, q</style>
9 t/ [4 U- Q: U* G. n</head>
- Y7 _% |2 L* T6 M3 b8 F<body>
4 r% F7 m8 {9 C* f5 X<div id="pic">
4 ^- F1 g9 A1 t$ m% a, z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ B# C) c/ i$ _$ P</div>
\) d* b, y5 X9 p: C</body> % n: p' B: t* s& W1 O! f
</html> |
|
发表于 2007-12-8 14:55
| 