|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14359
- 金币
- 2465
- 威望
- 1647
- 贡献
- 1413
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 ]4 F! B4 D R
关键在于：max-width:780px;以及下面那行。: h2 I4 }2 M* L Q. v
固定像素适应:
& w( |: N4 s. Z+ z0 s8 |) j
- K, u. p0 s% T# X) M. l9 }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> 以下是引用片段：
* A, m# J+ H# d! r<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 K$ B/ s" L8 d: j) @& Y<html xmlns="http://www.w3.org/1999/xhtml";>
+ ?- ?2 T! Q5 m( y% t<head> 3 ]( L; C, b9 E1 ^, n( z
<meta http-equiv="Content-Type" c /> 3 F6 n" X8 t7 W6 W
<title>css2.0 VS ie</title> , M2 H" J/ _5 `5 F) D% R
<style type="text/css"> & r/ _. t; K+ d5 B
<!--
9 E6 |% k3 T8 W# H* Ubody {
5 o$ Q! n: n- f6 |* ^; b$ @font-size: 12px;
1 @( h# l5 x( M6 [/ Ftext-align: center;
( ~1 e& g; t! T- D3 Y/ U0 @margin: 0px;
" @2 ^5 l& `# V1 @8 e* k, n) A0 O* spadding: 0px;
9 z8 G N) v! r}
' A+ @0 V8 k& c2 a6 i( O% @$ L: U& J#pic{ 8 `& l* b/ w/ n3 R, C
margin:0 auto; ) p4 G/ K3 R2 c4 H8 @' q: X2 F
width:800px; " M d/ g- V% ?: T a& ]/ A
padding:0; 6 g+ o+ ]4 K# w" g$ M
border:1px solid #333; 4 M/ v( v( G4 S2 k) s' ~& K
}
8 ]" B" K; i* Y6 \) O. |#pic img{
( t' W _/ Y" B* ?% }/ Z1 n max-width:780px;
3 [$ s \7 N0 B9 |$ v% |width:expression(document.body.clientWidth > 780? "780px": "auto" );
7 p2 P8 e' L; g) o% S# O8 f8 }# wborder:1px dashed #000;
$ n3 g) \0 `3 R}
! N+ G3 R) P3 ^9 v--> * U5 Q4 q* W$ V5 F' G" D
</style> : } I1 }, I0 m4 S# V1 e/ Y
</head>
2 y: |' d, r+ `+ T. G3 o<body>
/ ?% }; e1 M1 ^! Y' l0 w9 [+ i<div id="pic"> . B$ K- r; ~! q( y& V
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# P1 u* V( U8 z$ p0 Y9 j/ H- m8 D2 L</div>
& h' y: D: X1 |) G# Z b: P</body>
) O ~! ~+ P% e+ W</html> & i& |- x N# y
& O! c8 n0 ]7 M) N8 ~' a3 ?8 i. _
百分比适应:
( _ q% b9 c5 ^以下是引用片段：
) I+ e& B4 u, ]* d+ g+ |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : L7 f+ d: b& [
<html xmlns="http://www.w3.org/1999/xhtml";>
6 L9 G" |* K3 b) Q; @' C, V& k<head> 5 ]& d# S) J1 r" _( x
<meta http-equiv="Content-Type" c />
: F q# X8 d" N" P6 o1 ]( i! Y<title>css2.0 VS ie</title> . _) P. M5 u% q! t3 G
<style type="text/css"> e/ [3 ~3 z2 z) p
<!-- 4 @( C3 |" U/ L! S' c
body { # ~; C9 _) G. @
font-size: 12px;
; C4 }/ y* Q# p l1 `# o0 K' k- J% B9 Vtext-align: center; $ D3 J6 m o- w3 ?, ]
margin: 0px;
- z/ t$ z# i9 S; Opadding: 0px; 7 a9 M% F: {# x: l, c' @
}
/ o* ~( v/ C0 h9 a#pic{
# n0 E4 o1 H: h2 f1 t margin:0 auto;
) b( e7 o" q. n( B! W; l width:800px; 4 M6 N% m7 c" q( A, O
padding:0;
+ C& V: o5 Q# x O$ G$ f border:1px solid #333; ) f# Z0 D7 k: @6 P1 t
}
7 J8 _+ r( R! B; F# N#pic img{ 9 O' g& h F! a" |+ [5 m
max-width:780px; # P8 f% f! Z* o( a; C0 b6 K
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 e4 n7 c# z8 M1 e0 K; v
border:1px dashed #000;
( E1 [$ ]6 Z) V}
6 a; M, h+ E- ]-->
3 z- T z/ G2 S- I3 `</style> & i) x& l( E# f$ |: @
</head>
) p6 z- Y8 m% F$ p/ B<body>
) J6 R! h5 {1 }, Z+ Z! H<div id="pic"> , w6 [/ |+ L; C
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 l4 K! V& l7 s1 X! y/ @
</div>
" b7 {4 _* ^1 q/ b% k) o' Z, o Y</body>
* Q- P, L" x( W8 z" ?+ ]</html> |
|
发表于 2007-12-8 14:55
| 