|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14347
- 金币
- 2459
- 威望
- 1647
- 贡献
- 1407
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。: }8 j( {+ c) g. r, |9 v
关键在于：max-width:780px;以及下面那行。
1 G. G* G" _# D; O& o2 d固定像素适应:7 ?! Y+ i% I6 {
a6 w: P& M. p) R7 \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> 以下是引用片段：
M( t2 |" ?. b0 R. w6 n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; ]& Q3 Y6 a; H; o<html xmlns="http://www.w3.org/1999/xhtml";> 5 e( T) a/ L% Q$ i; r. b" }
<head> 5 ^; N( w4 s' ]5 E+ L
<meta http-equiv="Content-Type" c />
+ D; I& l! w" Y2 C( J<title>css2.0 VS ie</title> 2 x5 [8 y" ~' S$ N3 o& N
<style type="text/css"> * E% R' I6 _# }6 m6 X
<!-- 0 q3 R0 R L2 M. b, @9 p+ r
body {
5 e' `& ]6 K( A& a0 p5 Dfont-size: 12px; ) d$ [/ F: L: m" R2 {1 R
text-align: center; * A2 m) |6 @1 P; O
margin: 0px;
& W8 o3 ]1 L% [9 ~3 zpadding: 0px; 5 C( V8 ]5 ^5 n
}
g! _$ k% `0 `2 L$ T7 h#pic{
X/ o2 U. l% q" a margin:0 auto;
# p1 B( d! J9 _. t width:800px; p) G. V! h4 r# e- h
padding:0;
4 x* n% l; O5 ^5 b$ i; I border:1px solid #333; & u; `2 v" a; r5 b! I5 ~3 S6 W
} 2 {2 [, M4 U' o5 J7 E% V9 Y8 J0 v, x
#pic img{
' }( E( o, ~' ~% h1 m% O4 [ max-width:780px; 6 D8 v) s3 R9 ^& {: _7 y
width:expression(document.body.clientWidth > 780? "780px": "auto" ); % M8 y6 M$ o# b9 c
border:1px dashed #000; 3 Q) N! x# |; v2 d. e3 H" J
} ) D( f8 W! @2 t, k5 }
-->
6 r! f6 x, U9 K( G% T+ r/ Z</style> % G& _* Q7 }8 t3 }+ M
</head> / d/ A) @7 h$ g) E
<body>
1 m4 {: ]* }1 ?<div id="pic"> 5 V( G9 q ?+ ]! m
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : e0 i9 T! E9 }# ~- f
</div> : g: |9 a( e3 [0 [1 F# X) G$ c5 E7 U8 i
</body>
3 a; }) w5 g: }" ]. ^</html>
2 D3 |4 O9 ?1 y: o0 |" I
; a" d7 F( P- p3 Z5 P百分比适应:
+ m% d2 I* c& I: k7 K5 N! Q以下是引用片段：! b" q( Z) [, E! F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" Q4 x" m: U) s* k0 G& t<html xmlns="http://www.w3.org/1999/xhtml";> 0 n# J# a/ u% w0 @4 \4 m
<head>
* r- `6 ?" w8 ~5 R7 B<meta http-equiv="Content-Type" c /> 0 ~4 V7 }5 ~/ _0 Z" k5 }5 w- |
<title>css2.0 VS ie</title> , R$ g) d2 p9 B8 q; T5 n$ k
<style type="text/css"> 2 i% g1 c! N, G! ?8 z) Q& w
<!-- 8 J1 B( H/ ?% b3 y% j
body {
* S: K' x* e; V) g/ J: O/ J) ~) wfont-size: 12px;
3 g! t e# g( b% A$ o* N! k, W6 htext-align: center;
+ I: q2 f6 U4 s" B9 H, p& Ymargin: 0px;
+ @8 U9 X" ]$ ~padding: 0px; 3 H, l- W$ x" r
}
" n" z) q$ r" N( [! H+ I* A6 H7 ?) T& p#pic{
2 f- t$ I2 s' @ margin:0 auto;
' O! z* T3 S F4 x width:800px; 6 J9 m3 r0 m( R5 [# @
padding:0;
5 T @' Y- c" U* o5 i) K' b border:1px solid #333; 1 n( {+ N3 V7 U# R D- H5 l& h
} , e: p/ b0 D2 d% w2 w4 e; L
#pic img{ : w: J1 A. H* k$ G6 Y' G
max-width:780px; ; W; T) l) M6 {3 @ |& o- V1 j
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); $ u0 @8 d- T( D. F+ Q7 Q
border:1px dashed #000;
N& P& v& Y5 c' ~" o}
6 ]7 ^, K& {' y8 u; ^4 {-->
" `+ h. e9 h! d3 V, Q</style> / w. c& |, s7 g( D
</head> 0 r0 d# I2 `! b% p' I: T0 Q3 {
<body> 1 H! d; V! X6 f3 `
<div id="pic"> # B9 _$ X4 Y" p q) p
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 t" e8 o! y, o! g
</div> ) E5 Z5 l9 r) ^' t
</body> , s- W9 J4 [4 h& y
</html> |
|
发表于 2007-12-8 14:55
| 