|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14391
- 金币
- 2481
- 威望
- 1647
- 贡献
- 1429
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
}6 Q. L! [% _关键在于：max-width:780px;以及下面那行。
) e6 D5 o# {/ }固定像素适应:
8 Z j7 A: v" S7 p' j7 c6 u% ^: o
- n2 h w, K; g( b; U5 u$ `/ ?( g) Bdotted; 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> 以下是引用片段：
) S3 g) {% L9 K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . A0 |/ k$ @' f _/ ]' b. A+ n
<html xmlns="http://www.w3.org/1999/xhtml";> 1 R$ D2 ` d0 C: }0 f, F; m1 }
<head> & e# i; n( f5 G7 F
<meta http-equiv="Content-Type" c /> . M' W6 k7 f$ t$ h2 C+ w
<title>css2.0 VS ie</title> ) G$ p7 m& K0 W9 l4 w( y9 I1 \/ j
<style type="text/css">
% Z) K, Y+ V7 r6 @ z: X2 C$ P: ]: g<!--
& u( G0 I$ Z( A% v: l9 }/ t3 pbody {
) u# ~8 l1 t3 r2 b) vfont-size: 12px;
* p# S4 f. ~1 E+ _# V$ Gtext-align: center;
, z, L; U: W. D) b: umargin: 0px;
' q9 e, X0 P! e D: _7 d" M' dpadding: 0px; & y0 e4 s% s: ?. ~2 d
} ' ?& l8 V9 U: z+ I1 Z: V
#pic{ 5 u5 ~& E$ w3 {$ h: p; R
margin:0 auto; 2 @3 R$ \, i# ^) S
width:800px;
2 i5 h0 `( N$ o+ z+ }: I! Z padding:0;
) k# ]$ e( w! ] border:1px solid #333; + }! \$ A9 l! c+ y% P" E5 B, D
} 6 G% M& N a5 H! G
#pic img{ $ _! J5 h9 I! {3 N7 o, y' V
max-width:780px; : i5 D4 I/ j& N8 K0 f6 V
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ) J9 D. \( ~- u! U! {4 s' v
border:1px dashed #000;
7 @9 j) C. `" E! r2 L9 l8 K}
2 M8 Y4 C& x e, W% y5 G+ O) Z--> 4 q$ A9 n: g! ]+ E$ k4 P. V
</style>
: |" M3 t' Y+ |+ C</head>
' z. M" @) ~6 I- ~9 R9 C<body>
% u7 ~' J* i5 o8 J, d0 q<div id="pic"> / @* H7 n* o$ \$ A8 U
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 L+ l$ Y4 z0 G; h' S2 x. A7 ]/ r
</div>
% S; q! V* O, |( m1 m8 _6 u; T</body> : [: U$ t( _' r# }4 D4 C
</html>
( L/ B- u& T5 d6 E7 ^; E+ I. r1 \: w* c, F* U1 w z3 q, h
百分比适应:, l- c$ C: s, O& L, p, [2 S) R
以下是引用片段：
6 D- g8 d2 X# Z0 h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + W$ P7 E. E6 q- L
<html xmlns="http://www.w3.org/1999/xhtml";> 4 V* s% E: i6 t! S
<head> 7 u& |7 D. p( [
<meta http-equiv="Content-Type" c /> & @! H; N+ e* \4 c( i
<title>css2.0 VS ie</title> 5 _6 m0 f5 @! P4 p" q
<style type="text/css"> , ]+ z( h1 h( X, u9 e Q/ y, \
<!--
S0 Z2 a9 M# J3 T8 d% Ubody {
( R+ Z4 h- _: H) f" r) U+ rfont-size: 12px;
0 _* |% Q/ s. j- V( L3 S0 T) Xtext-align: center;
% r% P- i3 P7 rmargin: 0px; 9 [7 B; N* I; L" Y2 ?7 J3 L; Y
padding: 0px; 0 b7 X6 @5 \* _8 T
}
% H4 S- `. w' g! G1 C#pic{ & ~' ]& w/ ^. c; F- v2 X' Y" N2 G; h& \: ?
margin:0 auto; 1 K1 n0 B3 j* l- J1 k* d, t
width:800px;
+ B2 e v: a/ t J1 d padding:0; * o6 S3 a, P" Y" p0 \
border:1px solid #333;
5 u3 ]; ~7 w8 G6 [" h# t. j8 x7 l }
- R5 L8 P& v4 U! h' |#pic img{
, Y- G( B2 k, W4 z" y, f5 d max-width:780px;
4 W) r9 K3 C" y: F& a: y) A) uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 a( t! ^/ `2 T, N9 o4 Y" Z- q- o
border:1px dashed #000; / ^! ]6 W6 i2 g& R
} 3 e, R! s2 Q# d
--> 2 \! j; S: \% z5 Q
</style> + o2 C2 Z- V$ o( e
</head>
* ?. y/ l8 B, r4 i<body>
8 n) T8 x4 v) \* V<div id="pic"> 4 ] O' U& x8 \
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ X& Y3 u! V/ s, ]9 t* S$ ^0 Y- r</div>
# u. H5 ]" w; a$ \! s& k2 p l</body>
8 H; \) f0 ?8 o \( u2 ~</html> |
|
发表于 2007-12-8 14:55
| 