|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14437
- 金币
- 2504
- 威望
- 1647
- 贡献
- 1452
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。0 `* _3 F) g/ |* {- H
关键在于：max-width:780px;以及下面那行。: a# U$ s) I3 |2 B
固定像素适应:
" |" m0 E" o9 a. t8 x- J l3 O# ^- F( s/ p% z6 Z _
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> 以下是引用片段：
' Q8 P! F9 s/ X. o0 o<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - k0 p/ I. ^1 ^& M% y& Z
<html xmlns="http://www.w3.org/1999/xhtml";>
: z6 U) f3 t% D; Q+ B<head> 6 V) H+ p9 r7 s
<meta http-equiv="Content-Type" c />
1 y2 f& Q! ]6 c0 i<title>css2.0 VS ie</title> w! P( M z. H+ l
<style type="text/css"> , l) K# y* G8 H2 P) E) k N9 V
<!-- ; V4 r% Q4 z( c& f& g' v% J( L
body {
+ ^0 S: f0 ?* M: J0 b2 jfont-size: 12px;
, A7 @/ f S3 S) W7 D) Htext-align: center; + ?; l- r* e( Y% m3 D) p
margin: 0px;
$ h0 r. w- q6 b P8 Fpadding: 0px;
7 H0 W) e! j' j9 z/ T; v- V} ( ?* g/ W! o1 P0 z6 S+ m
#pic{
, }+ C- B3 z' G6 q0 s* d margin:0 auto;
6 ~% }- y) o2 z9 @$ F# t1 k width:800px; # V& z: w4 E; s8 k5 Q3 M
padding:0; T5 K: s* a) H% k6 ?& V: I7 f
border:1px solid #333; " S3 U2 w" Z# o' W' d5 y
}
/ M6 K. i8 c7 k) o& @#pic img{ & S1 T4 V K! D7 g' H- N
max-width:780px; - S6 |" h5 h1 V- a, ]2 G
width:expression(document.body.clientWidth > 780? "780px": "auto" );
4 e. }2 Z4 f8 n, Xborder:1px dashed #000;
, R" ~: G, G$ f+ e5 S} ) q5 u0 W! B" n6 G" }; j$ Q
--> / I5 O6 F' }/ K' l" i8 j
</style>
8 N6 d& F- l K4 j+ d# u7 L) {</head>
2 v- r; L& N, e# S; u+ t<body> # Z+ B; c6 M: r$ T" P( r
<div id="pic">
9 }+ z$ v s, B0 {' I* O<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 z& j5 y* `! A- N( L1 f. v9 y
</div> 2 a8 }$ d9 U$ s5 I1 I0 t
</body> ' m- q) r' ~: Z1 E
</html> / t/ {' J' v$ i( D: \& C8 a
8 A! K8 x3 S0 n0 w, j百分比适应:
- x# w3 `2 E, }' K* I以下是引用片段：$ v5 j j4 E& L& A! k2 q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ( p; q: K% _7 B$ ~' `. F8 G" Q
<html xmlns="http://www.w3.org/1999/xhtml";>
4 H. ?. o; \7 n! R r<head> 5 u9 `. b7 Z, K# G, w
<meta http-equiv="Content-Type" c /> , v* T4 o7 s* P& u+ j9 m5 `
<title>css2.0 VS ie</title> - ?! S; @* h: t, m% L& ]: i$ V% I
<style type="text/css"> 7 A# V" I3 O2 Q8 D
<!-- 3 z+ a9 @) l g: _: l0 M, M# C
body {
6 O& a3 m% \! _3 ufont-size: 12px; $ i0 w) e4 i- X W9 l! F8 Y# \
text-align: center;
1 P Y( ^) v/ ^* P9 \margin: 0px;
. I/ q( ?+ B$ L' E% wpadding: 0px; / l+ b2 X2 G' |* ^* w. t! m6 I
} + H; }4 M1 ~. s# l( f% j& a
#pic{
& h$ L$ \; N; N$ M) B X margin:0 auto;
. P, d! [# L& |+ _ x width:800px; ( o1 H1 G; g. I& N% I! o5 ?: h
padding:0;
4 ?( d, w+ s/ m6 ^( h border:1px solid #333;
. F1 e! _, ^+ N6 ~0 H* b }
( M5 H# B8 v' s#pic img{
3 J; W- g& `6 _+ u6 j max-width:780px; ) k' Q, [) f1 d) H4 g; j
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 v9 |, I* P; { Dborder:1px dashed #000;
+ B; m8 i( l0 F* P6 F6 n! f4 I}
9 m, Z0 z, P3 y/ Y. @-->
' C% }- G, c \" R' v( g$ h$ }( v</style> - ]6 [% [4 a% ~ l0 R6 y2 _8 U1 m o
</head>
. ]2 k( E: u6 m. F* G; P/ {& d9 B<body> + F4 K5 D5 i7 a
<div id="pic">
4 }/ l- I$ ~% Y8 k<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . Q0 \5 t0 B7 ?! Y" Z
</div> 2 z( ]) D4 q7 `1 z, k2 h3 m
</body>
9 I- _/ I" i" q" y2 w+ b% t( f5 g2 i</html> |
|
发表于 2007-12-8 14:55
| 