|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14407
- 金币
- 2489
- 威望
- 1647
- 贡献
- 1437
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。+ m2 F" ^4 ]! U; P+ N% `2 B
关键在于：max-width:780px;以及下面那行。
5 X4 Y8 x E. O# ^固定像素适应:7 U, v5 Y1 e4 f8 O1 b8 p
7 G2 Q% ?8 `$ \& `% _/ q& N
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> 以下是引用片段：* }/ K1 ^( s" K$ ?! J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 [: l( e* ~0 W5 j2 F<html xmlns="http://www.w3.org/1999/xhtml";>
0 g# \* `; \' Y1 C9 d* }<head> , \, ~1 o8 ?4 z( z Z: S
<meta http-equiv="Content-Type" c /> 8 E! l+ `3 B" ~0 L* A/ A1 H
<title>css2.0 VS ie</title>
4 d7 w1 Z: }( m<style type="text/css"> ; ?& g9 f, u: m
<!-- 4 g" F8 F1 X; p
body { & L8 y; m$ d- K% q, s
font-size: 12px;
: `' w) T7 ?' k9 @text-align: center;
2 C# N* J' n0 e4 p# W6 G5 fmargin: 0px;
4 X7 ~, \6 _' G, R$ s0 |' Y3 ppadding: 0px; . E3 b- h7 C: \6 k u
} / B: o$ G ]% S. t# T7 V# p5 X
#pic{
3 m& Z6 {! y: z0 }' }8 } margin:0 auto; , X/ t/ n7 t$ A. S9 z! a
width:800px; - ~' I4 o* t+ \# |# b+ _! T
padding:0; . f! `" B3 U* T+ |' @
border:1px solid #333;
$ ~ y' w9 F+ k' T$ M } 8 W9 [% d; E+ k
#pic img{
2 @0 ^4 ]: u& [' ^6 K max-width:780px; 4 m! w O8 {; E6 k) E
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& p5 H, u' |" k0 g. sborder:1px dashed #000; : L$ A8 U5 p$ E
} 0 O% i5 k8 V( [- I
-->
4 ~( N+ z8 Q6 v( M</style> 7 i" _' b/ f* c1 u$ f! \
</head> ) I) H4 A; d z2 i" P+ U
<body>
- l6 g* A7 O5 }3 A i; I<div id="pic">
2 z" y- Z$ z% T1 d<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! [) b+ h% q0 Q$ {0 t/ e
</div>
; H* D! Y( b5 L* v$ k- m</body>
5 M* y6 Q$ E+ G</html>
. r7 O. W8 K) U3 O. g4 T7 a" S- | o! h2 L* v5 h$ f
百分比适应:
5 Z, D9 J" ]) V以下是引用片段：+ E1 c# i: k: D- u7 a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) |6 \8 R/ X9 A5 \: E* B8 f<html xmlns="http://www.w3.org/1999/xhtml";>
1 d: J" A4 T, F<head> 1 m7 L) b9 k& P! j2 Q }) \
<meta http-equiv="Content-Type" c />
& Q! p8 S! ~- _+ ]& C+ U<title>css2.0 VS ie</title>
. G# A0 M0 c) e" y+ ]. M<style type="text/css"> & e# A3 i6 j% `% ], o
<!--
2 B6 K% Q: {% z I# gbody {
; U( r+ g3 z* u7 h- A9 Z; o* Tfont-size: 12px; 5 t$ u4 L5 D1 U
text-align: center;
) ^5 V% J: H- M' Dmargin: 0px; $ t; ^+ ~. `( U! o- q6 g( O
padding: 0px;
0 d s+ R8 y! b# a; G4 Z0 o} 0 B4 L* w3 O$ ]2 y) d6 T
#pic{ 1 o- i, v k. z: b/ d& m! p0 U# |: j
margin:0 auto;
7 x$ s( ~: E% ^" d7 k width:800px; ' q7 @# b8 r( m7 g# k: H2 R
padding:0; 7 J9 w; E+ E" K3 ?" p3 U
border:1px solid #333;
" t+ b# N: K6 T C# C) X }
! D8 W) `/ `% R& O#pic img{
& H3 ?: c# |6 j9 ?8 x' Z3 v max-width:780px; , |, x: B9 H6 H* t: ~6 _6 F
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ( Z7 `5 B8 t+ f& p6 K6 Q- p
border:1px dashed #000; ! S) Q) o& j/ { _- m
} 1 C& M; L* q2 `1 N) H
--> * b+ U8 B, o0 k1 M( N2 s
</style> 0 e6 |- j! ~8 O; P) @' ^1 W% J
</head> 3 u$ I2 O1 L# D+ e2 b8 D) [
<body>
0 \/ n. U# ]0 [ `' Z/ a$ m/ j<div id="pic">
, V' b( _7 i$ o8 K# C<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ {! r, }* [: v3 [8 V</div>
6 _9 g6 ^6 `5 l+ }3 O. Q</body> # F8 l1 E0 R5 K5 R/ m) o$ x
</html> |
|
发表于 2007-12-8 14:55
| 