|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14249
- 金币
- 2415
- 威望
- 1647
- 贡献
- 1363
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" \; g! m: ~0 L {关键在于：max-width:780px;以及下面那行。) j' t/ k1 n3 W8 `2 X3 U/ O* L
固定像素适应:
5 n: S0 @" U* C n! [; u& [' C" I, f) Z! g
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> 以下是引用片段：! \# ^ b) k4 Y! x" c) t1 L+ T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 f' {% o E. o/ X
<html xmlns="http://www.w3.org/1999/xhtml";> 6 g# @7 A6 k5 o: A, Z; {: N
<head> 8 ~7 c* X- h# }2 D+ R% x, E
<meta http-equiv="Content-Type" c /> % C# D% }8 w+ M- Q% Q# M
<title>css2.0 VS ie</title>
: t9 S5 ~8 c- }0 u/ d" {# T5 `<style type="text/css">
4 |' T j4 q& r4 G* c7 W<!--
9 P( i7 ?7 _* x O* T5 Cbody { ; b1 A$ j/ t2 | P! a7 O+ M" E
font-size: 12px;
+ @9 {6 B' t; N4 r4 {" L1 ntext-align: center;
6 E" \9 D$ r( R0 }3 q! m. amargin: 0px; ; R+ Q* ^4 j9 J. L, K6 r$ L
padding: 0px; 5 u3 b2 j% P7 W4 Z$ K; N, Y
} 9 S+ ^' C! h' Q# t
#pic{ . U9 {2 P9 T+ z( o: s/ B5 q$ L( C
margin:0 auto; - Q' w' X; S9 P
width:800px;
! z( S0 w: i+ d- k3 g. R4 Y padding:0; . N4 ]4 c0 M1 [5 S5 `& o8 g9 \
border:1px solid #333; % z. |) I0 |' m) m! K; S
} # G* o! d& T4 t9 h8 H) k4 F
#pic img{ 9 [ h! u, `$ u% Z* _4 V+ S k
max-width:780px; + T# ~/ t3 l, D0 o; ]( `. {1 W
width:expression(document.body.clientWidth > 780? "780px": "auto" );
5 l, _& o6 ]( s( Y% r8 m% o6 z& @* cborder:1px dashed #000;
5 @) F9 N" J; S( o/ m6 f} ; G5 z- z+ K& r4 u
--> / N# W& ^8 c6 t+ g0 H3 Y
</style>
- p2 h1 l" c' o7 E</head>
. a+ w- M9 D( m$ x5 \<body>
7 g- @1 `/ F* c7 B6 ]9 d3 n<div id="pic"> ) x2 e. l7 a& Q5 I& F
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 t' m e; ^: c/ v, O
</div> ' Z$ G6 W) t7 T& y) q# L# \
</body>
# @6 v- o# R- [</html> : M4 k0 U- @* ]" n/ I5 E# }
; ?# H, o5 H4 r6 I7 t, I百分比适应:: C" E! `& w5 P; Z4 A
以下是引用片段：
* q0 E7 F$ |2 d: z, v2 @: ` r$ x<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% Q* g. I' G: ?- W& N, ^<html xmlns="http://www.w3.org/1999/xhtml";> 5 D: B6 a# M' L4 s+ O' `7 e
<head>
. z; d- j! w" C<meta http-equiv="Content-Type" c /> 9 g! K) m' \0 r! `
<title>css2.0 VS ie</title>
' I. e8 K2 ]' E$ r- G<style type="text/css">
( y4 {3 G4 u) @ n- N! s) n<!--
% @6 W0 v- X" j, ~. ybody {
* m% F4 X! a: T- ]/ K: A3 U* Wfont-size: 12px; ' n( A# R/ X/ T) E
text-align: center;
4 Q4 P% F% K2 U) D9 \1 hmargin: 0px; / q; @! Z* Q5 i/ G" i
padding: 0px; 8 a& H, T% @5 }( N' |, P& ~
} % X% w* h/ G" L. l+ q
#pic{
# S$ [8 M9 A3 m/ o7 L# p& m margin:0 auto;
$ m) y3 O' ?0 S6 F: G$ S: I- t width:800px; ( T! ` w5 N/ D$ Q( N
padding:0; * r! M7 h5 z! `; N( V, S6 N0 W; u: _
border:1px solid #333; + _ {" c" G5 p# T( g; `% W
}
' }+ u! d7 i5 Z) q4 T7 `; ^- L# v#pic img{
, b. k- p3 D0 j8 K1 s max-width:780px; ( F9 M, D2 c1 u! q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); & x( d# o/ |7 C4 l; h! T
border:1px dashed #000; 8 L1 t/ u7 @/ [$ R, ~# V* a6 N! e
} : _: S0 I+ C0 D3 H# q: z
--> - T/ U! P! S- i3 @
</style> j7 Y& C K& r5 r, ^/ j3 a
</head> 6 P2 f. H- G, j1 x' _
<body>
1 ^2 y/ ~0 R h) v, j$ m<div id="pic">
9 ^+ ] F3 e5 `5 N& e& c<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' S$ @. Z& H8 Q1 B, n; {6 C
</div>
& \+ ]. C+ V1 E9 X0 A</body>
0 V& I8 l7 M T7 {</html> |
|
发表于 2007-12-8 14:55
| 