|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; b1 m5 m l1 k* k关键在于：max-width:780px;以及下面那行。
1 w8 N7 ^" K* v: Z固定像素适应:$ [+ B0 d9 U N' k5 f/ q6 x
) q4 ^6 Y9 Q0 X3 h8 hdotted; 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> 以下是引用片段：
: C: \! F- c& s" b: M" p7 K. }) a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + X8 E+ m5 X7 j. @
<html xmlns="http://www.w3.org/1999/xhtml";> & R& q' B r. m( L* c. W
<head>
. a4 e& Z5 G/ ?! B<meta http-equiv="Content-Type" c />
8 Y1 ?' q* ?# `# u) b1 j9 f+ L<title>css2.0 VS ie</title> 2 r1 }2 r3 \& [. y8 I) J
<style type="text/css">
, H8 p' J; G D" N/ C, w<!--
! ~1 o( M; Q/ n3 S9 ybody { ) z: u& M+ R+ r# A/ D
font-size: 12px; V$ J' x1 G* m! }* I
text-align: center; : o# S' `# Q0 X% {8 Z, ?
margin: 0px; . z6 v0 Y. y& z
padding: 0px;
# h; z& j! L. e9 R& X5 M F} 9 B/ S) A% I6 \' M+ i1 X- ~8 e
#pic{ 1 F1 Z3 ~/ O2 \& [
margin:0 auto;
8 @& {, o6 s C# m width:800px;
. c1 N' C9 L! S' V padding:0;
, i# w. g( [* d0 m border:1px solid #333;
) p* l, V$ Z" ~ } 2 J b8 ^4 T3 Q; b r( o/ [# l6 k
#pic img{
% {3 h$ ~6 a: E" B' ^& [ max-width:780px; 1 r5 P* R* \) J* f8 X/ G6 |
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 0 g% z! S: F1 x% W- }, e
border:1px dashed #000; * u i# j; [' c2 X" [' q. M; @
} + F8 m+ _7 r7 _) u: E* v: K
--> & ]6 |' m8 R6 ]. E. u& t
</style>
, y% P/ @5 Z# l; T</head>
) N8 h1 P7 M+ O4 A: Q& j<body> 5 G2 @% q* k* l1 b/ q& j8 C
<div id="pic">
- z. }! C1 P0 ~- g2 |/ F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> M3 a$ Y& l* j" A# ?/ p
</div>
3 i/ x5 m D5 O6 |9 D5 B+ d% [2 `</body> . F" Q) h1 d# @) i0 T
</html> , H/ b. w7 l/ i$ s" i/ z
! e( [* S% M% O2 V5 L
百分比适应:6 w6 b* \, Q) o/ j
以下是引用片段：
' H' Q6 a9 g9 P5 x7 D O, r<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 t: O1 A" \3 a7 H% z/ r+ B7 y- k
<html xmlns="http://www.w3.org/1999/xhtml";>
% U& b1 f; k3 T( ?$ j3 z* o<head> 5 h3 D; @" c) k; c% d* Y. P, T0 S
<meta http-equiv="Content-Type" c /> " T' Y; S: I# ~& I# |8 E3 n) y
<title>css2.0 VS ie</title> 9 L' P; Q; x @) B- p$ r
<style type="text/css"> 8 n& s/ i' ^8 t% J
<!--
L; r6 e) |7 L3 r; x |body { ! f1 q' n0 n# Y: d: U* ]+ t0 v
font-size: 12px; 8 B% z, ?0 {8 {8 F9 e: l
text-align: center; & o, N( I# w. H/ _ l5 a7 T
margin: 0px;
& E$ K# U+ F. i* {6 ~padding: 0px;
+ ?$ Y$ n' ^( U/ ~9 B: o7 ?' E9 S/ W}
0 E/ f" D9 |$ n h- }% A) m#pic{ $ E; k3 O% @- d. o
margin:0 auto;
% o! z3 Z! A% y0 a( z; C0 q width:800px; ' A5 i, |) ?" m2 ?
padding:0;
& G& {6 y5 z+ H0 V3 I; I border:1px solid #333;
6 y8 s: X" {: m N/ t; F }
( }( h% |: X( X/ V4 o#pic img{ ! Q) u8 z6 T& N i6 `1 s0 _
max-width:780px;
. [$ r3 V* S9 e1 M7 `8 b/ r* L) V) xwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # b4 ` X' }$ ]! B
border:1px dashed #000; . f2 U# s% P% T2 z
} $ d4 t( y$ d% V4 Y
--> A @2 \5 w' V0 Y P1 E/ H% [" m% k, M2 z% D
</style> 6 _& ^. O, Y3 X. C) q( t1 k% c- m
</head>
! I5 `1 p% \' E/ }+ C7 K9 A3 U q<body> 5 {9 z6 @! ]+ Z8 h: t
<div id="pic"> * i6 R! K9 S: F2 l
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ C' n) Y& K5 W
</div> 1 \ H* V. y! E9 ~% m/ g% I4 q; I
</body> - L7 L& t- m$ N
</html> |
|
发表于 2007-12-8 14:55
| 