|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14435
- 金币
- 2503
- 威望
- 1647
- 贡献
- 1451
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
# Q( X- ~* M- U2 [/ t关键在于：max-width:780px;以及下面那行。. {5 p& z/ {6 q. M
固定像素适应:
! k0 k L; m9 I8 q. |0 s6 b" w4 U- O6 s7 D2 _5 n$ `& G
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> 以下是引用片段：, U$ c( U# o V8 a, l4 x) g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 h* G9 u8 d) T. g# i. {
<html xmlns="http://www.w3.org/1999/xhtml";>
" E. _( y- _& ~6 w4 d# w: k; l+ O<head>
3 R4 [: B8 G- W) K) H2 w3 `5 c' p<meta http-equiv="Content-Type" c /> % B" |: j2 h3 a5 d
<title>css2.0 VS ie</title>
' y6 S* B" P9 b& k, ~& I' Y' u E7 z<style type="text/css">
1 W& G' ~5 \% E% J" O<!--
4 s& c. x, s" V' @/ k6 Vbody { 3 O( c6 I' m" |: k6 k# L
font-size: 12px; ! t1 N. q! r8 P( y, k- A8 n! H
text-align: center;
1 s, x2 y2 G7 b0 Mmargin: 0px;
' s5 c* [# M1 q) `) V; m8 Xpadding: 0px;
- l. G7 F% `/ k/ n}
2 m" ^9 r. P4 W+ ?) y#pic{ - h, A& {- J7 B% Q5 U
margin:0 auto;
8 N5 c5 T' x1 Y4 g$ }9 E width:800px; ' g/ h2 \3 ^. V; Q
padding:0;
) }0 T. X6 i5 k- ?+ a' K+ r border:1px solid #333; - L) M2 d8 C! ^% }8 ?' P
} " R% ^7 A v9 n/ N
#pic img{ - ~1 \% J; i7 D$ P! g! Q
max-width:780px; 4 B$ \$ |0 I- ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ D2 M5 d( f7 N/ Q% lborder:1px dashed #000;
8 S$ h* M1 ?7 g& N% L}
+ } J& }- R2 X4 f8 i3 e/ m5 b+ F--> + G( x1 z9 s. i$ x( [0 z `
</style> 4 O4 m6 h, v& {8 F
</head> 8 p0 {9 m' e8 }) n6 L, t
<body>
% U+ f2 i- S$ j& g; `' ^<div id="pic"> " h3 o9 p' j% ]; q. j r+ H& i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / M2 ^$ S X* r' w" ?7 z K! w4 L7 w
</div> # j2 O, i3 a7 B/ ?
</body>
! e/ E7 U$ r6 s% |, k</html> 9 U, m7 ]# J. f# d/ R: h
& ~4 z0 [. L8 \1 G! c" a' J
百分比适应:4 o: d& |+ @, b( _: S
以下是引用片段：
8 p; e6 @+ z5 I- v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 }: [ h. H) N( o* q6 l) S1 e
<html xmlns="http://www.w3.org/1999/xhtml";>
0 O. q% S8 G0 E" a0 `' ]<head> % D$ l0 C0 l7 K# h" C2 e
<meta http-equiv="Content-Type" c />
; N2 x1 f2 H" Y- J<title>css2.0 VS ie</title>
* S6 g* n1 u9 z+ q. l' b<style type="text/css"> # @: l2 h# q' j! k! x1 m" ]4 _& |( u
<!-- # \. ~8 _, i% n) i* [ z
body { 4 a7 u# x0 v7 L0 m' H' A# q: p" F
font-size: 12px;
) @: K, h. }- O- S; {text-align: center; ' ^9 D" D. C9 |5 P" c) I1 ~
margin: 0px; 8 t1 o0 K2 D+ G' J$ s$ h
padding: 0px;
; x# W/ U, f! Z" B}
! z% g% _( `+ m7 v1 J3 a% v#pic{
2 _. v" I# A" F3 H2 E, E; l( [ margin:0 auto; 8 G' b7 V3 C7 U9 i
width:800px; - v5 O3 r' j3 s/ _2 [
padding:0; 8 R1 j& f9 l7 `0 @/ q% A: O
border:1px solid #333; . g; l- w3 ?" \( B. e W6 s2 D# \
} 2 m$ n1 L% _ I7 l; e
#pic img{
% D! ~/ t! E* F3 D4 \ max-width:780px; * A7 V: j/ G, N/ i( h9 c
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ! N5 r M# v7 _% N6 Z& T k9 l
border:1px dashed #000; ) [5 N! D% ~- J8 w8 s3 P1 P; G
} 8 f# n6 |( b( w
-->
, i ^. T8 t7 Q</style>
: i; I. `! @% }5 _# U8 |( B</head> ! ?- J1 j! p [3 l, \* b
<body>
% B3 E/ Q. r' s# j<div id="pic">
}( M9 Z) h2 N8 R<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) f7 X3 S( p" X4 c7 C0 D</div>
$ K, l# H$ u/ g+ p: B</body> 5 |0 b: i- o6 m7 l! P
</html> |
|
发表于 2007-12-8 14:55
| 