|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14333
- 金币
- 2452
- 威望
- 1647
- 贡献
- 1400
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。) S0 Z: S1 x! t9 U( \
关键在于：max-width:780px;以及下面那行。
" T! u; c& V/ x$ a2 I固定像素适应:6 \+ W6 f0 z8 P7 }
# i; O" ~ G! U; N! D# f, C
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> 以下是引用片段：
9 T5 u' L4 C. n( {<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # k* P @0 U0 ?& P
<html xmlns="http://www.w3.org/1999/xhtml";> " j u7 H0 X( l* h# i$ L
<head>
$ O: W3 a8 g) f; n6 B<meta http-equiv="Content-Type" c />
. `7 T h) v$ R<title>css2.0 VS ie</title> + v1 R4 ]8 T" E8 B: B
<style type="text/css">
7 s) W4 u" E) p! [& S8 J! @. f<!--
2 T* g2 T0 |+ |3 kbody { 4 o% ~% o( D* `% w# q/ d' r) I) `
font-size: 12px;
, T1 B% ^% r! C$ R7 itext-align: center; 9 R& T: H# { C+ t; j. U8 |1 h
margin: 0px;
8 |; X, _. ^+ t2 _/ N; Ypadding: 0px;
" [! |8 p8 h5 R1 r}
. J6 j- W7 {2 u) l- G$ U- k- T#pic{ : y9 \+ H& a- N7 s& T
margin:0 auto;
3 y6 G9 x) m4 C9 \ width:800px;
# }4 y& W% ?7 L padding:0; , y9 J. L4 N9 r. N! O" @% _
border:1px solid #333; $ L! Q4 z# J H1 J1 j
} " t+ x, ?8 Y2 D/ ?; T5 n+ _$ V) U
#pic img{ / D* M9 H; b% f! U! P5 ~
max-width:780px;
8 ~1 g0 `8 Q( hwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
z# ?7 K1 ?6 U. F& p# S" u& r2 wborder:1px dashed #000; 1 o) A U" k, R6 i3 K# I- D
}
4 [; b1 A9 U: C! [# @4 c--> ; {, U* {: ?! l
</style>
7 {6 k8 e+ k; R# a6 N</head> . A; a0 J, Y. ?/ l! f
<body> 6 }6 \$ l% I7 t6 G R, D% z
<div id="pic">
4 c, R. Y* M6 L7 h, B- |$ S<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 a# I! q& C. b; l" i: e</div>
4 x1 Q- i* x& z. x9 S4 B, ^" g</body>
/ V: S8 H/ g2 S X2 j' e. Y</html>
/ \, b/ u% ?& p a: H0 v3 w/ o$ J7 e. O( S. p
百分比适应:+ L. X9 B$ K9 ]9 M0 A3 C
以下是引用片段：! z0 l+ b6 I I4 a! k% e7 V+ o- e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" B+ J \& |0 e& }<html xmlns="http://www.w3.org/1999/xhtml";> / }% y2 E+ M A" h; o; I
<head> * L! Q0 v( H( w- T: f
<meta http-equiv="Content-Type" c /> + i, x4 b1 }) D* I7 D
<title>css2.0 VS ie</title> 0 w, ?, b4 n9 Y
<style type="text/css">
* Q7 O; \! S/ Y8 K) m<!-- # o7 W9 a/ Y% [4 l
body { & h4 Q3 d" C* P1 E0 U, m% P, w3 ]
font-size: 12px; 9 U7 u( Z9 Y/ ` z2 x% L
text-align: center; ; h0 h- v9 `# ~% M. G7 f6 s; d
margin: 0px; % ~" R3 c: |4 Y. |! c/ M
padding: 0px;
2 k5 |4 W7 A0 K: J}
& b6 N1 \) R8 }/ [+ }2 G#pic{ % D% R! k; O; ]2 Y4 B- Q* N" J
margin:0 auto; + _1 i C) d% x0 u
width:800px; 6 {' s9 y7 D; E/ \- [
padding:0;
6 `+ w ~8 L h3 x k* r border:1px solid #333;
1 L Z% Q9 u2 P [- b& t } % @. a& u D1 {+ k( J! R/ |6 n
#pic img{ , D9 o! k; X% s$ ~
max-width:780px;
2 g0 L, a) q8 |9 M- \+ t Vwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ h _9 l! C* ^* h7 lborder:1px dashed #000; 9 n% k; c* I( t% A3 H1 `; `
} % p; I- [3 L; A6 o8 [
--> 6 ~8 k2 U4 m) R2 i/ T
</style> 8 Y& U) B0 I2 o' W; j x& |
</head> & }- V& h$ c! ?5 S5 U& x* C5 H
<body>
* ?3 N. Q7 n% \8 M' ?<div id="pic">
9 ~2 z7 @* j) l4 |! O8 G. E/ q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; a, J3 Z P4 ?4 Q' c7 D I, H/ F; t
</div> ' b* ~" K0 v) F$ g1 b, w' h' H
</body> " }3 ~- t( P, ^2 K" i
</html> |
|
发表于 2007-12-8 14:55
| 