|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ {& f: O* ^( `, Y. ^关键在于：max-width:780px;以及下面那行。
( ?' j5 c7 D h) v固定像素适应:
* J: x( V( ?1 B8 q- K6 C/ l* w1 }6 C/ I
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> 以下是引用片段：; }3 a: o" z$ M& j& T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ I; K1 p: Y/ v% d3 E* _<html xmlns="http://www.w3.org/1999/xhtml";>
( U; T5 y, Q0 k<head> 9 i6 p* k# J- a5 M
<meta http-equiv="Content-Type" c /> K5 o, C( N9 j0 V
<title>css2.0 VS ie</title> $ \' M) D% R! x% @9 i
<style type="text/css"> % \& z5 S0 Z+ C& h4 k4 O
<!--
2 b. J% d) D$ bbody { 6 z8 M M4 \; J3 G
font-size: 12px; 4 R. y6 u& ~3 ]9 f; r
text-align: center;
/ C% {+ D7 G" X7 Q* _5 b1 }- mmargin: 0px; , h8 k, e# w: p0 {+ N
padding: 0px;
* l# T4 T; X* [$ [2 Z}
+ S4 Y8 d; _7 }! S#pic{
! c& C z& Q; v- e8 e/ d' Y1 T8 M margin:0 auto;
% {/ \* [# C0 |) B width:800px;
7 p! O7 p+ M" H" k' G) G. f padding:0;
+ {2 S2 W+ `3 a5 j8 o" b& M border:1px solid #333; 5 R+ ?4 ?' }5 v' A6 S. E
}
0 w6 W; p5 w8 y$ n$ g7 X1 {1 k! g#pic img{ 2 Y* @4 c, u; y% e- f
max-width:780px;
, y* @6 t- C" @width:expression(document.body.clientWidth > 780? "780px": "auto" );
. z8 M* |5 b2 a% _ R9 Lborder:1px dashed #000;
3 \9 d5 K% E$ H; e7 Y} 9 \) G Q7 Z( f! [$ U& T
--> * W8 X0 T" I, C6 r9 G, P
</style> * \3 ^. t# ~5 N6 r& M
</head> . V0 Q2 X5 x0 B
<body>
O4 {: V B5 a0 ^% ?6 n7 z7 s* Y<div id="pic">
- g) \* E$ _ w- L7 x7 _<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 \0 m0 o8 z1 b7 v7 u, X
</div>
# W3 Q- X b! y; Z</body>
[: \5 v6 N. U d; l: R</html> , N8 n0 ^% p2 W' \/ R% X4 U
9 y2 d2 o# K U3 |6 L
百分比适应:
3 E3 H* R9 ]6 ~- d& ?- W5 t/ e以下是引用片段：7 q6 M' a: p+ F3 n# f/ q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; [5 g- r) B: B2 b, e7 S<html xmlns="http://www.w3.org/1999/xhtml";>
j+ r U; X& g. [7 I% ^<head>
1 k$ z' C" |4 s9 w# B7 p<meta http-equiv="Content-Type" c />
2 G2 ~3 @# V2 b/ U<title>css2.0 VS ie</title> ; [- W3 _; O' E8 S0 U
<style type="text/css"> % e5 h' r- P* Z* |+ w
<!-- + ~1 e Z/ T2 Q' {
body {
* r. _* S1 E1 J' e0 Lfont-size: 12px;
6 Y7 Q8 `) X- ^( W& f: jtext-align: center; 3 D# u" C0 D* H
margin: 0px; ! c" @6 C ~; X0 |/ x* v$ `0 K1 ?3 R8 F
padding: 0px; 5 K; }0 \; s5 g( b3 l$ I9 J) B/ i( z
} 5 w( K, d* f, i$ Z5 l- R; T! Y
#pic{ 4 z4 e4 y# }3 C/ Q7 L
margin:0 auto;
0 D) ~8 T8 y0 D width:800px;
* C" O( |, I' u) g padding:0; % j) X- a* n# F; C* X( A0 Z
border:1px solid #333; ; u# c0 _; @" @3 q' [. s% \- F
}
5 P8 Y* h; U( z; L) H* g" A#pic img{
: z7 q/ W$ M0 D* n& l- F8 C. j4 o max-width:780px;
8 F# A- S) s! fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' t' u# i+ j/ }+ L. `% n3 pborder:1px dashed #000;
; |( v1 _+ E. ^, L; ?8 E} 7 r, X& y+ N' Q1 h
--> $ i8 ?3 i# ~3 R* m
</style> 2 X; v+ H. s2 Z3 d
</head> : W$ g. e b% o) A
<body> / n2 A. u* L* ^5 y8 J
<div id="pic"> * I. J: K) ?" C. p( ?3 A0 k! b
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( J# j" u# B' v2 k& n, B# \, F
</div>
4 S: l- i3 |, f! o</body>
) i4 e6 @7 s0 P9 B</html> |
|
发表于 2007-12-8 14:55
| 