|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; i; c* O. _5 A% u9 p关键在于：max-width:780px;以及下面那行。6 F+ \$ @& C$ {
固定像素适应:7 A" p2 v$ W! e; [* d
7 W0 x$ i. X: y. \+ a
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> 以下是引用片段：
4 H( L5 _: X, W, P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, D( T/ K Z2 m2 B9 a7 Z<html xmlns="http://www.w3.org/1999/xhtml";> 8 r1 ]5 I$ F/ E& u( w8 Z; n7 P
<head> ) G8 _# O: ^- W7 W, F6 O" c
<meta http-equiv="Content-Type" c /> 0 Q6 O9 [1 L0 ?! y0 g: h1 {
<title>css2.0 VS ie</title>
, f8 l2 u, A3 j& S<style type="text/css">
4 n" ~ X8 k. a, t<!--
% ^2 M" r8 Z0 q- m- i- g; \/ zbody {
% y- v1 D7 Q6 ]8 ~0 D* rfont-size: 12px; 5 c$ l5 g: n! q( e3 l
text-align: center; , M/ D+ ]; j* A7 ~
margin: 0px; . S) d5 @1 L9 w% {
padding: 0px; + w) `+ t E. G! t' O; P. X+ M
}
* \& L# |; H, o& c5 s# g#pic{ 0 K [7 f5 m( Q+ B9 y
margin:0 auto;
8 C) P) l. |. N# R5 ^; _3 k width:800px;
# K1 I6 j- a8 R8 z! f# d# S$ r padding:0;
( i6 b2 y! k: y3 F, ]; o- Y border:1px solid #333; 2 @# L' ? q# u3 A4 d' p6 `
} ( G+ T( ~6 l4 C2 b! u4 T Y
#pic img{
$ ?/ g2 K4 |5 h, R1 I max-width:780px; : e1 @3 O/ m# \, N' Q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
* V6 `. f$ F: _6 ]6 Vborder:1px dashed #000; 6 w# l, ]( k7 F
} * e3 S" ^6 @% J1 Q$ C
--> ) C# j$ j0 X) t/ n# Q/ ?
</style> 9 L3 K2 c( }: Y0 t( m) E
</head>
9 [" g2 h3 x& E& j/ Q' t<body>
2 U8 z" E2 [5 [: @* \, ~<div id="pic">
+ f+ D/ L' v* j<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. V- N- }" q w1 o</div>
7 V) f; k$ W4 u+ m</body> 2 Q. G* G E& r4 i7 Z/ P* T; K/ J
</html> . D, _1 A7 {- B2 d, v
" w% h7 T0 I+ P, s# \. Q
百分比适应:
2 l6 d' M7 T" K以下是引用片段：# H F" @: t$ v* b2 H* k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) o" W0 ^! t' k$ G5 O" |8 b9 Z
<html xmlns="http://www.w3.org/1999/xhtml";> " ]5 Z8 ?2 }) r% m5 S: Y# j
<head>
4 h$ @! d! m! W8 u7 F& V<meta http-equiv="Content-Type" c /> : H8 d1 v/ ^, e( V
<title>css2.0 VS ie</title>
3 H: `! E+ q4 a( H+ `<style type="text/css"> & ^2 t0 Q9 ~! v; D" l* o
<!--
8 @+ ~; J( b8 j( M5 e4 ~1 mbody {
0 R+ {9 C6 H8 P$ U" qfont-size: 12px; , s/ c. S- w; N- B
text-align: center; - ?+ X2 [! N+ H `. [$ N
margin: 0px;
, t5 Z. b2 P4 V5 Mpadding: 0px; 3 q% m! b- J/ E. Y u3 ?5 t
}
" Q5 a4 X, O" c7 C7 g#pic{
4 ]) H1 ~3 i- H& G* J margin:0 auto;
8 j9 h; B+ i! `9 Z8 Y6 J width:800px;
1 A' E# W2 X* B- ~- \ padding:0;
: u1 o+ j, x( S4 I; J border:1px solid #333; , T( s+ |8 V$ F2 v% o$ ]
} / H e3 t3 d( f3 B0 s2 z+ J g' R3 [
#pic img{ $ D6 F' t1 f k$ g
max-width:780px;
0 t4 U e" M) ^width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 i0 \. s6 j! ^! Aborder:1px dashed #000; + p1 q G- f4 A9 J
}
* W2 j; U3 w4 l$ u-->
3 |2 j. m0 K6 f, R- g. j</style> 9 [$ O. `; u+ [. c" m8 n% q
</head> 8 _# r5 h% o, M" X% E: w
<body> * Y% H2 z7 b& @8 L
<div id="pic"> & K7 F9 ]- I$ v9 L; U9 e: k
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 c' g. |4 J6 T" z+ d+ C
</div> 9 v- R+ f, g, h$ |
</body>
) ~7 ^. r; G8 f( \ l! R/ b</html> |
|
发表于 2007-12-8 14:55
| 