|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。$ d! H3 s* R9 a* z
关键在于：max-width:780px;以及下面那行。
. q8 D/ i7 n9 I0 ?固定像素适应:
2 h8 \+ E" o# b) v) t1 u& z6 h: m1 N8 I/ O8 ?! d
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> 以下是引用片段： q$ L% }+ l: K- u- d9 Y* g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' D' {8 F! \$ H
<html xmlns="http://www.w3.org/1999/xhtml";>
, |% {8 b8 M" k<head> 4 A& c. Q" z9 }8 H' c% A* ~
<meta http-equiv="Content-Type" c /> % @0 h; Z1 d3 O) f% }
<title>css2.0 VS ie</title> ! ?( A6 K1 L+ g) z+ [
<style type="text/css"> P+ y3 O; r, Z7 L3 l5 g% y
<!-- % ]! |$ D/ P+ F' q& h9 p: u8 B; C
body { $ i: r7 f! C/ [7 J3 f; A
font-size: 12px; 6 S3 M c3 j4 i, b) c$ a
text-align: center;
- Z# X3 F& r- r' D# {' Umargin: 0px; 8 F4 j- V3 Q' h4 P- o' B* L$ b
padding: 0px;
4 O# h) s9 d8 Y/ B! I* b2 V}
. V" f& g% z. B5 O+ L% w- Y% U0 p6 T#pic{
* Y. I7 t( \6 Y& V' b margin:0 auto; # ~* M3 R! L5 V
width:800px;
: K; r# r' ~7 H9 S$ o padding:0;
2 x# }) F4 L q5 n" v border:1px solid #333; " }0 d" L" a7 I
} 1 f! @+ q. M5 ^( o* Z9 b, ?
#pic img{ 7 d. k+ C2 \$ p5 t" P$ [& \' F* r8 h
max-width:780px;
4 G6 I. @2 z8 p( P8 Q# u$ rwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
* e6 I5 d) @6 ^$ w( zborder:1px dashed #000; 6 v# g4 G! O! c) ^6 M
}
9 L2 C! {& a' m9 G3 S7 A! [5 U0 {--> 7 {* i( L: Q8 Z* ]
</style>
9 o a( ^1 b8 \+ Q</head> $ j" h' x+ r7 i2 J
<body> 4 C9 o* Z9 P; b+ O" m
<div id="pic"> 9 _8 t; o0 a. Z# Q' r' O, d
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * F5 _. L# S% [# p) Z
</div> g, x' F4 c) N% @/ ~) p3 l0 n" q) M
</body>
0 ]: W9 |! ^. B</html>
# Y) d2 b) {: z( ~6 M e8 X# v! E5 K0 l5 R5 y' E) e
百分比适应:
5 `' c! \( _6 I) m) @5 a6 M* q% r# H以下是引用片段：
/ t0 m7 j" K( Z" D# f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # i6 I2 ^8 |% z; B( C/ s" v
<html xmlns="http://www.w3.org/1999/xhtml";> % ~/ G( \# o9 o8 |& I! N* R
<head>
% G* [' `. e; H0 [) v( i0 e<meta http-equiv="Content-Type" c /> 7 g9 t3 M, [ Q* q5 C, _
<title>css2.0 VS ie</title> / U( h: {6 ^/ |( B/ a$ i9 a
<style type="text/css"> 2 O( b* i$ U8 _
<!-- ; u/ b8 L6 ?3 t
body {
5 D* B, M) j, w+ u* {& {3 \. bfont-size: 12px;
9 G0 X* Y' c! ~& g0 Y" ~text-align: center; & `: t' ?" y* M. A4 H
margin: 0px;
/ i) v* t& G4 E ^( L6 Mpadding: 0px; 3 x s0 l3 M% c2 x. h
}
; N9 q. V# D% a& m#pic{
7 e" s9 T+ C$ ~, z; N margin:0 auto; 4 U. o: J9 i( W/ I1 g, g1 @7 A/ A
width:800px;
: g7 _, ~$ Y( H; O; k padding:0; : e$ C2 X: E- D; I6 c' j8 S: m* c
border:1px solid #333;
1 e5 x' m% e3 L! U } $ W) \! @+ u( q2 q% }
#pic img{
9 \; |; H3 v2 [5 ` max-width:780px; 9 p. J; w P R9 ? D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
R: F8 q0 T! \. _. j1 m% J% oborder:1px dashed #000;
; R/ C2 X6 `8 ~8 y2 y}
( C T* |% R/ z) E! T--> 9 c% R9 v7 d3 z$ m
</style>
, Q/ m2 U- A. {- T</head>
7 K* X, `& l" w! B/ m, T, c) K+ J<body>
* Q# f6 e* G6 E<div id="pic"> 7 l; a4 n3 \/ A% S
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; F, |' m" r7 @% b
</div> , R. D% }6 |! h- }! [- b) x( L3 w# |( ]
</body>
" m9 i! y. Z: [ q* p</html> |
|
发表于 2007-12-8 14:55
| 