|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 W/ u) s/ ?) ^. d/ Z关键在于：max-width:780px;以及下面那行。
. z) h6 g+ j+ J1 C* n固定像素适应:* u" X7 J y1 |. }* V
! j N1 ~8 i* m0 W5 `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> 以下是引用片段：
4 H- R ~2 H- z" U0 b* _% G$ X<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 P& `) i" I) F8 @( j<html xmlns="http://www.w3.org/1999/xhtml";> ; `& j5 }$ B- T+ k/ V7 y* l
<head> , U! g+ W7 H: y
<meta http-equiv="Content-Type" c />
) N% s/ l8 M1 F% @1 \<title>css2.0 VS ie</title>
5 Y. t1 Y6 c, ^<style type="text/css">
/ `9 ? x" z5 |) w- H' E<!-- 1 U; M" ]+ k! i4 L
body {
( i) K) F2 w1 Xfont-size: 12px;
* g% J: @! P; _" v8 @5 U( atext-align: center;
2 q( _, U; F U4 Ymargin: 0px; ( v# m$ n. f; T6 X% H
padding: 0px;
# e' }! B6 ^/ D' l7 l9 Q, R+ D7 H}
4 P; z# f. k7 @) A- O/ Q+ N#pic{ 4 b- R" d3 Y4 G
margin:0 auto;
2 @4 v4 {8 w+ B) K3 ]- } width:800px;
/ j5 t8 |/ |2 @ p2 f2 D, n padding:0; ; j7 V- _' _, c' U$ r+ D% k7 M
border:1px solid #333; ! f0 n" F6 w7 Z( K8 G
}
, R8 l7 J8 G/ E+ V9 t3 a- Z6 ]#pic img{ ; t/ D7 Y! ? B' S g$ }# `' l
max-width:780px;
9 V$ N% r! l1 l# J. uwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 7 S; d. w& o& h
border:1px dashed #000; x/ r9 y5 D/ x/ b5 {- u
} 6 Z* z- v( V0 T6 l) m, ?& i+ d
-->
V6 I. d* _" x</style>
- q) z' Q6 J5 W: i</head> 2 ~& [1 ~9 q5 F7 V* x8 F! M! F# F2 {
<body> 3 _9 H7 q k0 o6 w
<div id="pic"> 4 J& w) Q$ O5 y- l& V- k4 G8 p
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 i( P+ t# i4 r1 P. G
</div> - J& f0 a7 U# F( m. Q0 p, |: P3 s9 }; G
</body> 1 V$ w( L: X1 |* Q& l; D
</html> ( q$ ]' W" i- k
) c4 f e* u5 h, M, @百分比适应:7 @; ~0 A% i3 }' i
以下是引用片段：) D& p$ S& a5 J% N# `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& m# F+ M7 ]: j. u8 ^<html xmlns="http://www.w3.org/1999/xhtml";> 9 g4 t% s: g9 v# s. K- l1 S% p" ]& \. \
<head> : o( u( h- c2 H7 ?
<meta http-equiv="Content-Type" c /> $ ?$ G9 o( f" ?3 f/ t+ ^" x3 o
<title>css2.0 VS ie</title> - \6 j K3 K! T. w
<style type="text/css"> , v' L% C5 ?( p! L
<!-- 5 i& {9 V9 p; h- Z( W6 }
body { 9 a' P8 ?: ^; t" }6 Y2 Z
font-size: 12px;
0 s9 K; [% }- T! |& J x0 Ytext-align: center; & o% i6 k% k$ o1 ^" R3 q# R, P
margin: 0px;
) K* J5 E J2 V* p. kpadding: 0px; 4 f4 g* ?; }8 J
} # g; j9 \1 a' j* E( R. `
#pic{
4 Q, N$ |" B7 R* V7 m2 u0 D margin:0 auto;
' Y% N) v4 D+ o' [ width:800px; j$ N; B$ l* A5 C
padding:0; b* F8 ?' n9 d+ S* k" D
border:1px solid #333;
* U: s! Z d' T } ( @ `' s( S$ ?( _/ b- X/ c% x
#pic img{ # y3 Y8 ^# u a d+ T
max-width:780px;
j3 C2 N2 A" {2 b7 Y vwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- `% \- F# O) p* z$ z+ b. ^border:1px dashed #000;
# O* v: ?7 @! \! N; l} ' l7 `9 H! Y! D1 C7 d" h
--> 5 V i7 M4 ^) \# J1 p' s
</style> ; U0 h+ v8 H6 \
</head>
, j: |: j B. f% h7 m; d. d' X<body> 6 |& l' K) H" ?" P$ t& C- ?8 i
<div id="pic"> & G) m# E+ T- |; p' H& u
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! S% b0 P* ^; J# D</div> ; ~" C! Y$ f6 D4 a$ m
</body>
% u0 u5 j4 Q, }</html> |
|
发表于 2007-12-8 14:55
| 