|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。: c0 A1 l# \7 H, M
关键在于：max-width:780px;以及下面那行。( s$ M& ]! G. c
固定像素适应:
+ W$ e9 l+ R; P2 e. q4 ^1 t7 t1 |
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> 以下是引用片段：6 v0 z: {9 T' d* a' E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) i; X4 t! X) D/ ^<html xmlns="http://www.w3.org/1999/xhtml";>
" Q* E8 `2 ~ B6 M<head>
* N; Z& w: y1 n& i<meta http-equiv="Content-Type" c />
5 E/ s8 h) a. I<title>css2.0 VS ie</title> 9 f0 k4 e3 s9 r H9 p
<style type="text/css"> Q7 ?. N: `* p, f5 P V, }+ L
<!-- 4 @$ c: r( X' `* U
body {
3 H: j' { x( r8 F( V. o$ {6 jfont-size: 12px; ' A3 m! [ ]9 Q0 g0 r# i3 T
text-align: center;
1 |! r5 b) P* B3 Cmargin: 0px;
2 V% x; d8 H$ E+ e9 J, a& Upadding: 0px;
/ f# p& d9 | L}
* b7 H5 q) w- G" ]#pic{
. p: e7 p. r$ g margin:0 auto;
- Y+ G; D1 X2 m width:800px;
6 W5 p! i6 q, _6 X1 {. `& a: e padding:0;
( u- v, A9 P( r! X' Y5 n7 l border:1px solid #333;
6 x2 U7 d0 a. B/ f% | } ) O* \" H( Y' x" N" p, ^
#pic img{ , ?! `* p( H4 i
max-width:780px; ' n% h8 L2 L! P* q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: L/ Z; T0 a, D; yborder:1px dashed #000; 6 q3 Z* G! K# I+ @0 ` Y# w
} 7 V. W0 \ A1 c9 w: H9 n1 s1 H
--> $ Y ]2 C, f/ R( n' T, `/ p
</style>
3 d, C+ J( J3 z4 o</head> 4 k6 r7 `3 P( z, a6 s
<body> & \; ?$ @4 s' _; J* J
<div id="pic"> " [8 i/ k2 n1 d$ Y [+ T0 ^$ c
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 P! [& u) i& ]3 m J/ W
</div> 6 s6 V7 _" W D
</body>
# j6 l- D8 ?9 |# r</html>
. r" k) r6 m& f0 M
# t2 q/ ^+ C* ]$ [4 [1 J% ~- L百分比适应:
$ q4 Y6 j3 W! l5 ]$ j8 M以下是引用片段：
: d6 p4 s; }1 {6 Y4 h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 D0 S. ^2 z- B8 D$ i" N<html xmlns="http://www.w3.org/1999/xhtml";> 3 o+ A" t* {9 e
<head>
( o5 a' b Z" L. L j z<meta http-equiv="Content-Type" c /> # B+ V6 t( M; k5 ?- l
<title>css2.0 VS ie</title> 6 n% s4 a: i& \
<style type="text/css">
4 B4 t/ p% z5 g2 `& [4 V- G<!-- 7 t. b& u+ B. `: z# S- g$ D$ w
body {
' D/ h' X* l! {font-size: 12px; ! i. t0 U' c9 z! o0 r9 t+ W
text-align: center; ( v& ~8 U" w+ ]4 i- f
margin: 0px;
, |5 A* |! Y4 Z1 jpadding: 0px;
; u" b3 C" f7 e3 D# f4 ^% ^} " f1 ~( o8 g$ p" p( V! Y( B) N
#pic{ ) ?2 M0 p: A+ M) k( k
margin:0 auto;
: K0 F( [: i- e- C+ q width:800px; % {: H/ c8 Y+ g3 s+ \0 r3 ^. E9 T8 H& U
padding:0; 9 V, y, W) Z( M0 Q9 R% D: B" ~
border:1px solid #333;
/ @, h5 q$ l$ [% \! y4 y }
: Z. n5 I- q, \+ p#pic img{ * R6 c! k0 |" A6 L/ G7 L N
max-width:780px;
3 ]8 g2 P) A. hwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); * x' w& z. ?. D+ P
border:1px dashed #000; . y b& ]3 `( ]% O& K5 W1 {/ m
} : J4 A y; }9 g+ v: F
-->
$ c& u+ ~1 M6 b/ b$ B5 T! }</style>
* }, S- O: D7 t0 a, W& i/ r* x</head>
. t0 F0 ~7 K' A0 i5 h<body> 6 t9 V5 T7 v0 J+ E, ?/ a# E
<div id="pic">
' A( U4 L/ E/ G, `1 A2 }<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 M1 |9 G* c5 `0 J</div>
5 S5 q3 R5 H1 y: L; a0 z. X' t' ^* g</body> / I3 W* u9 w( V7 o0 F1 p9 X
</html> |
|
发表于 2007-12-8 14:55
| 