|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; X) i7 W' X( r& q9 F关键在于：max-width:780px;以及下面那行。, f- T0 n( ?" X d, J/ y5 u7 F P3 x7 A
固定像素适应:
; a, F' y( J% x n; c3 p: g. k$ [" `( x+ @' r/ 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> 以下是引用片段：9 p- C0 z; Y \% X, N1 U l! ~4 q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 a9 o) l+ u" q& d3 y<html xmlns="http://www.w3.org/1999/xhtml";>
$ L4 x, R8 D, ]2 [7 w2 @<head>
; q& M" v4 W, S% J3 I) @<meta http-equiv="Content-Type" c />
1 I$ H# E5 { x4 ?" N6 P<title>css2.0 VS ie</title> 2 }0 a2 P: f( r1 N6 x0 d b
<style type="text/css">
9 b0 g) V3 x* z( R4 H9 g% |+ N<!-- 8 R- A5 r6 e4 z8 C' o
body {
1 _" k$ {$ P7 K' q; [8 Q; Sfont-size: 12px; . r% i% x: r2 I3 D4 o8 Q( N
text-align: center;
, r! [! W; _6 Amargin: 0px;
+ A1 \4 Q: c& \+ O# P4 Spadding: 0px;
" A& ^. l6 y' l- R} : B$ R% o% `6 T( T7 B+ Y# V
#pic{ : q2 L. x0 f) G. X* g
margin:0 auto; ! H; U5 a& z5 F8 o, p1 }$ f
width:800px;
9 C7 q/ M8 M% J$ e- N padding:0; # K) q2 G R" D; e8 d, x; o+ {
border:1px solid #333;
1 _7 Q- I: B+ s& {# ?- x3 C" K1 | }
& p; A8 p5 F$ ]0 ]#pic img{
* F' V/ M2 l3 r- o& t& {* |% o max-width:780px;
6 `9 k F$ ^# W) b$ E0 ywidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 7 g( r$ [7 m8 O# l7 ~, H0 x
border:1px dashed #000; 1 |* n2 x) x/ G F* w
}
& F' W, X. j% L4 g% C-->
4 i' E$ `* }. M$ y</style>
5 p! l8 I9 U* m6 {1 l</head> 6 o4 M( R" _: v7 |+ V
<body> 8 ?* d$ n6 W; @8 |- _' y Q
<div id="pic">
3 R7 b- R: u3 W5 j+ H' B<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : a* l$ _! F/ L
</div> 0 G; k A, O& U E$ A& C# V# Y& p9 ?, l
</body> 1 v% [ W! U o- C, l
</html>
( V- g3 W. T" X$ H
$ J" w% O' f6 R$ z百分比适应:2 O& p6 l; q# V# _6 E
以下是引用片段：; p/ {: w. P- M. t$ g8 E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) O" }, a! |$ f
<html xmlns="http://www.w3.org/1999/xhtml";>
6 x% W' B7 E! l- Z% o<head>
0 Q4 n. m! X9 w( k- c* u k9 Y<meta http-equiv="Content-Type" c /> 2 W- e* p" C* r' l; H) r
<title>css2.0 VS ie</title>
5 u3 q3 s& `! J, v. v<style type="text/css">
1 v: o6 M6 h) P s6 v/ Q; s<!--
$ R3 Z3 r$ \: M8 xbody { ' M) J) m! O6 ~
font-size: 12px; ' G R9 M' T4 U; Z/ J
text-align: center; 8 X8 ]3 o) T0 G/ \4 q( \
margin: 0px; . ]. i8 `8 N; h
padding: 0px; & O% l4 M6 x3 T. z r. }
}
H- H. l8 E0 Q- v! K, R#pic{ ) }0 t4 J& Y& C' L% D
margin:0 auto;
* u! F% g \; f9 c4 {- m+ g width:800px;
/ B0 |( B# k! s, Q8 H padding:0;
9 _- |/ W# Q+ i) w4 Y4 y border:1px solid #333; ( {% ]+ n3 `9 S! |/ U
}
* K) Q, U% b% K/ I/ e6 W H#pic img{ 5 X8 x x+ F. m1 ?
max-width:780px; 6 n" p. V i1 _! t2 t% g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 }; E, D, f* S2 \1 tborder:1px dashed #000;
8 @ C% p0 i. ^7 Z. f9 S6 p}
. _) `' \ y. I6 U; L. B1 ?--> 5 o# [( g, d! g- v# Q
</style> " G8 o- K" }, B3 y! k
</head>
0 i3 q* V _) X& V* c4 ?" R& V4 M$ Y<body>
" i* y2 D+ d i<div id="pic">
/ _' z# N' G- |) R4 w<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 W2 u; ] f7 e$ [6 @
</div> 1 C$ Q: X3 h8 h- N9 l' G
</body>
$ ]1 o' b# B! h/ R3 }9 j</html> |
|
发表于 2007-12-8 14:55
| 