|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 a+ s) ?8 m( r" j. n" u( c2 f! G
关键在于：max-width:780px;以及下面那行。: U) C7 s' Q: o1 p4 \3 Y0 F
固定像素适应:( {" [: u7 F2 h! z8 }* U4 ]
/ t8 _0 T: O( b, 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> 以下是引用片段：
5 n9 r% p* k& I, F) H# ]- T7 ]1 [<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 b9 |# Y% G O4 S1 f8 Z1 j! J9 P
<html xmlns="http://www.w3.org/1999/xhtml";>
: F; ^9 h1 ]9 S7 [ T# Q) V<head> 9 n% [6 M) j5 [, ^
<meta http-equiv="Content-Type" c />
& ~7 U* j0 f9 V) P<title>css2.0 VS ie</title>
# S0 W+ p2 `% t# J; E' [7 {<style type="text/css">
3 a1 g; ~$ L4 o Y3 i. A; R. B<!--
; l7 A+ J9 ]+ i6 X# pbody { 4 h, _& ~" |; M6 S3 c
font-size: 12px;
0 ?8 l7 `$ |3 H" vtext-align: center; ; T$ s4 b9 d$ K- W3 P4 e
margin: 0px; , y: _ ?, h, ~+ `* t
padding: 0px;
' o) z9 E1 [+ h; a6 f) k; j} , X$ h: e. V, O- J
#pic{
2 ?+ L$ l& e2 d% T6 e margin:0 auto;
$ i4 h8 O E& [ width:800px; - Z$ C: ]) v1 A/ {2 q! Z
padding:0;
6 r' \" \ K* O- z% O7 Y' U border:1px solid #333;
/ U+ D$ k* s* c: Y; ^0 z' \# m } ( z* o3 K0 g, v; ^2 m M
#pic img{
8 \9 v# Y$ K6 l) m max-width:780px; 9 G9 p4 X4 g& E9 z
width:expression(document.body.clientWidth > 780? "780px": "auto" ); % @* K" F5 {: A+ l" [
border:1px dashed #000; 9 x2 w3 Q8 X8 I9 V. y
} % Q2 j' G/ h. H! N+ E8 s0 C5 C1 f
--> / y+ y0 r, H3 @. p
</style> . R. ]9 l6 o3 T% Z' x: B
</head>
7 v% ]1 B: h! e: D4 }<body>
" e2 [" t% N$ V5 E- d2 k<div id="pic">
+ X4 t- d- P+ Q, n/ y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 a' p) C% v1 P0 M</div> 2 u: \# f4 A, t: s
</body> 3 ?4 y* |* s w3 M& H! z
</html>
$ ]# Z" o8 k+ l# E
. e: x# n- q, e- h; ^百分比适应:
# ~3 ]% j3 T: p以下是引用片段：
0 j1 O: G( z0 }! s<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; g0 h; y1 B. b2 l, u) C! L9 s5 n
<html xmlns="http://www.w3.org/1999/xhtml";> " [* v: U* U0 V5 G1 O7 R
<head> . D" C" p: X- S) |: t
<meta http-equiv="Content-Type" c /> ! m( q/ v6 c7 L6 [" w# {
<title>css2.0 VS ie</title>
$ _0 p$ i$ [. |: x. t4 _<style type="text/css">
e+ k& q, i! C) r' \5 a& b: W3 c<!--
/ J2 Q# V* H7 X5 dbody { # z7 M3 \ S) E S0 n
font-size: 12px;
6 g8 R A% y' g3 X7 W* l& Q( w' Qtext-align: center; 9 j# i! M3 {! E# d/ i
margin: 0px; % k: {; ~- Y3 R9 L) O
padding: 0px;
. }* G2 f( M5 G- X}
/ K* G" [1 A( Y) u" ?. c8 R#pic{
/ _* ?9 V8 O5 w9 x margin:0 auto;
5 p& S' _( {) P0 | width:800px;
+ }) M) N6 t5 }- ^( [+ A# @ padding:0;
3 x. N( K% @# O border:1px solid #333;
4 c5 I6 i$ V6 U# X( j& d$ c8 |( p- e } ! v- T9 Y' Q$ V
#pic img{ : Z! c* Z8 n- v, P6 o. \& N
max-width:780px;
Q" d5 Q; w' L* g- w7 F$ nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
! h/ D1 z1 S( Q" N2 vborder:1px dashed #000; 4 ^8 ~; M+ d/ f3 X, w- p t6 r4 Z, q
}
! c. \5 f. }: J$ \5 b-->
* u6 N$ U" y/ R7 O</style>
- s- o% f8 B& M: m2 P</head>
5 J( i% V$ \: a& `# M) f<body> k$ M% |0 A4 j1 [" e/ `
<div id="pic">
, _( S( [& G' _6 Z' d1 m7 C4 m, f<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / ?& i3 |& }, W5 G* b# p
</div> : b* f3 s: ~5 u8 y
</body>
1 f7 P+ z2 t# d1 q3 X% h8 f</html> |
|
发表于 2007-12-8 14:55
| 