|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14369
- 金币
- 2470
- 威望
- 1647
- 贡献
- 1418
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。8 ?$ Q! K2 U7 \$ [
关键在于：max-width:780px;以及下面那行。
0 g% N! R1 E4 i4 e$ J固定像素适应:) ^0 n. s9 D, ]. }
; o- m7 H6 G. t# O: s* \' F1 h& sdotted; 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 p2 [0 n% j( v( b. w<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! }5 i/ y' b& l( y
<html xmlns="http://www.w3.org/1999/xhtml";>
3 {5 t; D# ]( {8 I- J# u" I+ H<head>
& E, Z, Y- y5 M7 M& @3 g, `# L<meta http-equiv="Content-Type" c />
7 W' ^3 K: Q9 U( `<title>css2.0 VS ie</title>
/ k. s+ Q" o- k5 O2 ~( T<style type="text/css">
% E) u/ n g6 P: f<!-- 4 t& A. C: L5 N
body { - h% _" A* _9 S4 V+ L$ m! f
font-size: 12px;
7 s! M X9 e2 P# U( C3 Otext-align: center;
. `( \' p2 o* T! Kmargin: 0px; , l6 ^! F) f0 f5 t4 b
padding: 0px; ( a3 {% j( `4 W" b
} ' J+ ? f/ c9 n+ R0 x S
#pic{
( M( f" f- F& ?' j margin:0 auto; 2 \: O" e, B9 w1 I" i
width:800px;
9 [; ~) l$ U! Y3 o( l2 m: d4 ?. T padding:0; 6 w8 A/ {4 Q' F3 y' v
border:1px solid #333; , M9 n! a2 e$ j; N
} ~* [" s0 k+ M0 ]4 `9 ]
#pic img{
8 ~" D) b4 Q' ^6 ]+ r3 v max-width:780px;
0 t0 I# @, ~& |/ q7 x! a3 ?3 {+ Ywidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ! F% C N2 a/ @) D* W7 ]
border:1px dashed #000;
- M4 m$ w0 c: Q7 ~7 {5 v} . k) u. a; J! @7 n/ T5 o1 R
-->
% J& k: x; R1 o* V3 n! n- u7 h& U</style>
- \/ C9 q. ^ _! V4 L0 f</head> : Z- T" t% f5 e
<body>
7 J# u: J. |" R0 K<div id="pic">
w v3 G( B( s! R j" B$ @<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" _, L% C. U5 j. u: o/ q( z, s# @</div>
4 l- B$ ^8 p4 F" M. s</body> : ~8 E8 [( q8 z2 A
</html>
( X% P+ A5 ?1 K; o1 a! [- U( }) M- [7 u
百分比适应:$ T# `. W. Q$ M2 M$ Z& B5 t0 \0 u) [
以下是引用片段：
]# _8 g) j3 a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " t4 S+ P7 D3 C
<html xmlns="http://www.w3.org/1999/xhtml";>
* Z2 m8 q: g$ Q# p<head> ; F* Q# V0 o; A! n3 O! b- j0 e+ M
<meta http-equiv="Content-Type" c /> ; Y, y0 y9 a {7 P
<title>css2.0 VS ie</title>
6 A6 h/ _6 L- C' ]<style type="text/css">
$ O' Q/ p* b/ W2 G8 V2 D<!-- / F% \. U) F0 e1 z# W a: m
body { 4 Y6 F9 \' J7 _1 N* z
font-size: 12px;
1 I; H# l! N* _4 Itext-align: center;
8 ~' L" I0 z0 `" [margin: 0px; 2 Q3 _; R* C0 `4 ~1 \5 \0 s
padding: 0px; % _9 M9 f; F7 P9 K. \
}
7 n* I- u2 Q! i6 S7 e1 e! y5 P#pic{ . {$ w7 K2 c' y2 S* x
margin:0 auto; ) \1 y& q- `, u/ [$ f9 l: O
width:800px;
1 e6 X5 ], F( r) J8 a& M) j% ? padding:0;
% H2 ]2 X- M- }2 ~* b( z0 \ border:1px solid #333; 8 t* s! |/ }# s$ K
} # {: u8 ^3 l; _
#pic img{ ( e" W* h2 q4 O7 \1 A
max-width:780px;
2 n2 S' T( Y! _& Q) C# z- e# P" i6 awidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); % `* B/ t' p' v, M+ U
border:1px dashed #000; 4 `# h8 w' o8 r4 o( T0 w, l
} & L; ^9 I( A* o& G; V
--> $ ?3 ]3 J" h1 h# p0 u0 J
</style>
' U6 p8 W$ B" O* C6 {9 }</head> 5 o X, y, T# u5 B- Y- f9 } F7 ~
<body>
3 E7 |1 q$ A6 X- ^; b$ b# T0 Q<div id="pic">
1 Y. _6 K- m2 O3 x7 L/ y- Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ t' \+ x1 i3 i( c% `, W b9 d</div> 3 c, Y: I% H3 } v6 N' }
</body> % I. R$ n! y. [! v
</html> |
|
发表于 2007-12-8 14:55
| 