|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* I: q7 z# A" V1 e" f关键在于：max-width:780px;以及下面那行。4 v, C: `0 N1 Z; U* ?
固定像素适应:( h5 B6 s( D/ |' F# s$ u! \
8 M/ g" M: P. r" h2 M6 q9 Jdotted; 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> 以下是引用片段：
E, }0 `9 m/ [0 {7 n# ]3 ]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 x+ {1 Y- G. S, o4 d$ T, X! i2 a
<html xmlns="http://www.w3.org/1999/xhtml";> 8 f: h) p& X W7 D
<head> 4 [" k! B6 Z/ \; q' `4 {( q
<meta http-equiv="Content-Type" c />
: }+ u5 F0 |4 ~6 D<title>css2.0 VS ie</title>
6 c6 L5 D" B) A; ^<style type="text/css">
7 G: F7 G& [, @% [7 o<!-- 0 n0 B* h' `8 a/ m5 a
body { 6 V4 q' v7 P6 p3 Q7 J) g* p# O
font-size: 12px; 4 X1 w8 B1 A; \0 ]; x: H
text-align: center;
" p) D. L0 e. ]- fmargin: 0px; ) W) i e- y: h6 N4 U7 s
padding: 0px; ) X+ P$ V+ l* u- g6 |
} 7 Q" X! u: j9 ~4 {' y$ B8 c
#pic{
6 c. R2 d, y$ w8 b' B/ j: B) ^) A( _4 u5 l margin:0 auto; " w- R% C/ g9 r C2 G
width:800px; . Y. h% J4 a* V9 x1 W' ], J
padding:0; & A0 H1 [. `3 v) K, v L! V
border:1px solid #333; " b' ?" G- v! l6 R& Y6 w* d& l
} 1 I# i8 m0 P$ T7 L6 U& {
#pic img{ Y* T; f+ _' r' e% D
max-width:780px;
- M5 V. P$ G/ Fwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); / o! \# a5 l. t' r
border:1px dashed #000; ) H" H, v Q$ Z6 b% T1 Z
} 6 c/ G( G8 a, C4 M. o
--> ! v1 Y! ^% {% q5 y* G
</style>
- u- [+ x/ q6 m% q' F5 k' O8 ^</head>
9 ^8 m6 v# D' z# b* C' Q. `8 W5 q<body> : K$ _# `1 q& p' P# B% T
<div id="pic"> ) M# ?3 i$ i: f
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. |- p# o0 D2 {2 F- K</div> + a S' |7 a5 N. j) K! E& L$ _
</body> ) m& k( p5 }0 B2 Y7 q8 B/ m
</html> ( h) A1 i2 u( V" y
m. E$ q# p# R* P& T, k$ P8 w m
百分比适应:% z8 ]0 J/ s+ z7 c7 g
以下是引用片段：" X" p2 n8 a* E& k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 X5 a7 R8 {, j4 B9 [
<html xmlns="http://www.w3.org/1999/xhtml";> : A$ ?- S" Z1 j( E3 _9 d" M9 l( `( V
<head> 2 u) U+ _+ A; N+ Z# P' e
<meta http-equiv="Content-Type" c />
& e$ s$ H, P6 F7 e o2 U<title>css2.0 VS ie</title>
8 S) D! @) L Y* m# Z<style type="text/css"> ) A$ y3 V& ^: N$ M5 \' A: f
<!--
" u* { W1 A! J( Y, |7 |; o) Rbody { / _, x" ^' q( N! \5 F
font-size: 12px;
/ p6 }1 s* l( y8 |" wtext-align: center; & G. J% z& n. n: J' @
margin: 0px;
9 g/ g) a4 L9 z$ B4 d9 \% Fpadding: 0px;
" t! X' D- b8 \+ W9 L- V5 a}
9 b7 e {8 P$ o5 K6 ~" q#pic{
4 D$ L3 {. t" D! j, b' I" y" ]4 x- D8 q margin:0 auto; 1 k! {* w3 F* p
width:800px; 8 s9 z; _0 } W1 B+ o3 N% P2 P' c
padding:0;
, {5 \" G% i1 a/ s G+ ] border:1px solid #333;
* `' ?+ d. z2 Y4 B. E8 C ? }
; m4 k0 x$ w" {% e#pic img{
0 P F! \' H% t, m3 g) C2 P max-width:780px; $ {8 c" F/ f- {+ z( v V0 c% c+ L
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); & O8 x0 @; v8 f& H
border:1px dashed #000;
# V5 H, E- N+ M& x} 1 X9 X2 i5 g2 c1 ~8 L
--> 8 U/ k, l0 c: H# w
</style>
7 U4 L% c, K' O# e0 {. _</head> 5 R: m( E; c# T: m* c( J* A* ]3 G
<body>
' W* L" D% T6 k" b4 q6 v<div id="pic">
3 Q( M$ F* [0 N% C& I<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ j3 F0 m+ e+ s2 ]</div> 8 G9 \+ m' d/ O4 c1 Q& c* D3 |3 i
</body> / Y" ~) N' l! |% n& ~6 \) p2 H6 v, Y
</html> |
|
发表于 2007-12-8 14:55
| 