|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14325
- 金币
- 2448
- 威望
- 1647
- 贡献
- 1396
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 M0 q I7 e1 T, r8 N关键在于：max-width:780px;以及下面那行。
* C& c7 l1 \ y- b, ]固定像素适应:
" O9 X$ ?4 n* s6 V# C, J9 H1 ]
, Z4 K& X) Y# {/ w9 S! Y: C! Ndotted; 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> 以下是引用片段：8 Y: L6 A D% S$ Y2 e! X. U1 e3 K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 [$ @6 w8 Z F<html xmlns="http://www.w3.org/1999/xhtml";>
' ~$ b( }: w) y) v0 F<head> , B& Y0 _7 {0 v, q2 M
<meta http-equiv="Content-Type" c />
) v# ?" s8 J1 q; K+ B<title>css2.0 VS ie</title>
; n3 h: I$ T4 j3 {% ?( q<style type="text/css"> , D" L3 f" B9 c8 W; h& @- Z
<!-- " a5 n1 r2 G! n
body {
# |/ U4 J7 ^& d& qfont-size: 12px; . Z/ Q& _3 A& X0 T) }
text-align: center;
9 Z& j! Q0 u0 a$ ?# Dmargin: 0px;
5 k4 Z, [; w( A' U" \+ |0 ^( epadding: 0px; . J% [6 t( X4 l5 Z* p+ Y
}
) f$ S$ _- X$ O* M#pic{
/ t7 V) w, s- a margin:0 auto; \9 R' i0 o' \& B
width:800px; 3 ^, _' ~. C. V, u2 a8 Q9 }
padding:0; : s4 |: Q' W' J# u
border:1px solid #333; 2 v; R- _5 s0 w* T5 A- c
}
" f4 T8 b z& q: A#pic img{
4 W9 z- a+ O6 o$ } max-width:780px; : ^; u3 A# B) i# {
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ' C G( ^7 P7 Q! @ p
border:1px dashed #000; 3 D" `- g! @) `0 h! N
}
$ l( Y& v8 P6 ]-->
& Z' H+ F( Y: r7 t. @</style>
y! ~# }# g; P5 _1 ]: L7 y</head> 4 H5 `. p- A, X& f# q( |
<body>
. N( A) z9 b& ^( Z<div id="pic">
a% v1 o7 J# M5 r2 E<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & U) k' n! { _7 |) l) H& n1 [/ I
</div> * K+ A3 v7 C. `- J6 v' U6 X
</body> 9 m+ O! y, F \3 j% I1 v2 \1 m7 _
</html>
! J" A% C3 |8 F3 [' {$ V
2 {2 ]+ l' N, I7 A- O! I, Z! E( K# H百分比适应:
) X. b2 E7 x6 @; h以下是引用片段：4 |1 M( @. w+ u0 K7 i' z, e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( C/ _7 `+ K+ d5 @' B8 d<html xmlns="http://www.w3.org/1999/xhtml";>
$ j1 T+ p* c1 Y4 h3 d+ J( }0 K<head>
8 w# R8 {2 v7 x1 G6 O<meta http-equiv="Content-Type" c /> 7 a' r6 S4 R) i, y8 A$ Q; q9 i1 u
<title>css2.0 VS ie</title> E& O. Z* y' ]7 m/ F: V
<style type="text/css"> ' z/ C9 m G, w- G) J% g! q" V
<!-- ( w) q, `; m) H5 M
body { / j+ J0 k* j0 h4 Q! f
font-size: 12px;
1 V# V% T9 A1 H% `( btext-align: center;
1 t4 E; J, u; c, J9 v8 Imargin: 0px;
! l" c0 l7 D5 S" Z/ F0 O9 `padding: 0px; 4 F* ?3 ^. n0 O6 a6 P) ^8 P
}
5 G" Y6 e+ p2 [6 x#pic{ . a% l6 v' u* c# @
margin:0 auto;
) P$ A1 U+ o3 L" O width:800px; , h+ p- W) U$ H9 b
padding:0; # V1 o: w1 A+ H
border:1px solid #333;
) O$ l) e4 b A. Y }
J9 f" D/ h. {/ a% b! I$ m#pic img{
1 [! W; E' B4 }) Q: v7 L# Z max-width:780px; 8 ?* O- n Z( p' `/ q. [! ]) @/ d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ' e4 k: k% m6 ^8 O
border:1px dashed #000; & E) ~3 R" G ]9 J
} * ]! |4 t* W N# Z
-->
! r9 g% y& r5 p</style> 8 @; @5 p+ ]* G( @- m; n$ w% q- K
</head> . w. W, H: U( H
<body>
* m! r4 m0 u& i+ S<div id="pic">
# c2 r7 B# N+ ^- m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 l1 U8 B! m9 ^' o4 A. L' `3 t</div> & _8 y3 x3 `# ? {" F- E5 ~7 ]
</body> ) l$ n! _, ^( g) k' \: c
</html> |
|
发表于 2007-12-8 14:55
| 