|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14341
- 金币
- 2456
- 威望
- 1647
- 贡献
- 1404
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 G, n5 X3 v0 v6 ] F9 t
关键在于：max-width:780px;以及下面那行。# b- Z) g5 _3 Y: D
固定像素适应:
" Z9 U; z4 G7 ]- M, u8 @. o g
7 w$ j! }! ^" ~' P: }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> 以下是引用片段：
7 |" k4 T& F8 R: h; @9 t<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 E6 V" W( G7 ]! s% O9 A
<html xmlns="http://www.w3.org/1999/xhtml";>
* E& s% R7 n5 f# w<head>
r* m. S! K# o4 \. |& [8 I<meta http-equiv="Content-Type" c /> / L. ?5 P! v" T
<title>css2.0 VS ie</title>
& ~, \& \2 a4 m, y" ^5 @* w) M4 y<style type="text/css"> 7 b% C5 K: \, } ?: _ U. h
<!-- ) P" k7 B& v6 |) k
body {
* k3 {# i' S7 `- Z9 y1 c: L+ Hfont-size: 12px;
9 q* G# D' r9 v0 Dtext-align: center; . p) J1 F+ g8 `7 ?3 j/ Q1 L; w+ ~& @
margin: 0px; # |) H/ h) I5 t. }! F+ ^
padding: 0px;
5 ?; o0 z3 b( O9 U7 ], e} ; J! ^( E8 Y1 E3 W! {
#pic{ " K! \* b* J! F) n8 I6 y
margin:0 auto; " N$ T+ o3 Z9 }6 X, ?
width:800px;
4 Q$ v+ ?8 M: G9 p padding:0;
( j! x# h4 S9 m$ X border:1px solid #333; * [+ I+ C& R. E/ r7 I5 X L2 `# Q
} 3 n$ A" b Q9 E9 r2 w m
#pic img{
% {. n! ?+ `1 u( Z! s- m' B1 v' R max-width:780px;
* K, O7 t4 f6 J Bwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
2 t- P" o6 p6 \4 w9 C+ c( pborder:1px dashed #000; * M3 e0 q9 Y4 ? q0 L: c) E
} $ C* e1 [% X0 q2 y$ ]; @7 p
--> ' u8 T! Z5 S c2 K9 @. w# f- Y2 j: U
</style> ! I, H- ]# \+ ?/ P
</head>
) _, i5 z b0 w/ o5 V<body> o) l) b; \ b: i6 ^
<div id="pic"> 2 K0 n: b% U5 P3 U
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
d; q8 c. m3 d& R; l- L! j</div>
+ f5 `7 k' F& V) P e</body>
8 p0 H2 n V% T9 |</html>
6 H/ f/ y. h1 q, }) v
- t& B# s O: D7 j( |# P% B4 C百分比适应:5 E; t$ @+ J8 U4 e
以下是引用片段：! G, C8 e9 s0 U) {6 I- E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + ?3 ~+ I, c" n( d5 C9 A
<html xmlns="http://www.w3.org/1999/xhtml";> 0 m. a/ ~) N+ X) B" x1 |
<head> $ ?7 M# v/ d0 c! S7 _- p
<meta http-equiv="Content-Type" c /> 4 Q# O- r- S7 k6 ^3 C/ [/ P
<title>css2.0 VS ie</title>
/ A3 V p7 w7 z<style type="text/css">
k) |# L7 b! A5 `: C<!--
) Y/ A7 z. w/ i& a8 C u6 jbody { 5 M9 w. z7 t, t- A
font-size: 12px;
3 q2 U) K7 a [4 j+ ktext-align: center;
0 G5 F8 q; ~& j7 W7 a3 Fmargin: 0px; ) P% e$ \+ X. g
padding: 0px;
0 w/ H1 o ~9 j/ E} ) {5 {* ^; J4 S* i7 J2 ] o
#pic{
0 s( r9 B& O. D0 C$ m3 I) f5 h9 A margin:0 auto; 2 b6 L$ y- X% _ v
width:800px;
: Y2 E* F3 H5 {3 s ~% v padding:0;
& \9 U! T1 l. k& @" J3 ?0 b border:1px solid #333;
5 F e& }. e6 k! u } 8 B# ~! [2 u; ]
#pic img{ v/ u5 a; ?- G/ Q% o: L6 B
max-width:780px;
/ G/ M; c: @$ Q$ Pwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 3 \" t9 }6 L) ~, F) ~
border:1px dashed #000; 8 J4 v' E: X. D( Y# h& V' x
} 5 }$ ~: V5 s8 P- B! K* w9 U
--> & n- ^& M2 x! t* X
</style> , \" r; v, i6 `* B
</head> $ Y4 h. c0 ~# U+ u, K
<body> - N r. b, f- A! i
<div id="pic">
5 g: {, J* }$ |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( y d2 Z3 c4 ]5 }8 y</div>
) j8 i" K7 f6 S B$ q</body> 7 c. g- l( d9 h6 x) K6 T
</html> |
|
发表于 2007-12-8 14:55
| 