|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14323
- 金币
- 2447
- 威望
- 1647
- 贡献
- 1395
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" x ?! I7 k! j8 C" W8 g" y" G关键在于：max-width:780px;以及下面那行。
8 U) f3 O& o; ^) p7 w3 k6 Q固定像素适应:
' I; @! i( `; [2 i! X3 B% Z0 A4 ]/ Q, o0 C
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> 以下是引用片段：
0 y. Q0 r/ h7 E P. g<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : M, a4 e- ~! y5 O. u9 Y
<html xmlns="http://www.w3.org/1999/xhtml";>
& i8 }" n! P- ~. Y* I<head> 7 A# @1 w" ]/ S! d# g, f
<meta http-equiv="Content-Type" c /> 8 i G! ^5 n. I% `2 l
<title>css2.0 VS ie</title>
, O1 N- G- ~5 @# ^<style type="text/css"> * G' }- o" l |& p$ c
<!-- ! o$ V, y* R+ [, S5 m" ~
body {
" }; W6 e7 [' N, c7 Hfont-size: 12px;
# D# Z- k4 |- Z$ z4 n& I6 y+ }text-align: center; 9 a/ Q$ u3 v, D3 x9 q
margin: 0px;
8 E, J, h4 b9 u; O! A4 L* J4 Epadding: 0px;
3 G! ^4 u+ ?* E4 ~' |) j, j; [ ]} - x2 q# N2 u! Z" |
#pic{
9 C Y; y8 K4 N( N9 S margin:0 auto; - C4 Q U6 n6 C6 Q- ~
width:800px; 6 k4 j- k0 f- s/ R2 u, s
padding:0;
3 G) a( ]* }# i border:1px solid #333; + ]- j/ A- h! A' Q9 ~( F4 P% z9 K
}
3 f2 t& y& P+ K% Y! ?, F# T' s#pic img{
( F" `- C! W; S5 |* K max-width:780px; ! j a l% V, w
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 |6 X/ Y9 t" s( ?. z2 P0 N4 `* jborder:1px dashed #000; $ w8 N* s7 X+ c7 Y0 S* @
}
2 z& ~% b$ Z3 A' I5 b8 X-->
# ?- _3 k# G' t/ B</style> / O5 A" B, m" I9 G0 |9 @
</head>
; T8 O- O3 n( E8 T9 [" N<body>
3 w }: r( `8 F6 y5 {8 y( X<div id="pic">
6 l- n9 }' J1 z4 C<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 L( H$ _ U1 r. T! E
</div>
; P! }0 i/ @# ^</body> , {7 R2 Y3 a# a5 r A
</html> . g) K4 v9 z* G; K0 w0 ^
0 f' u! O1 s/ d- u2 b$ w( b百分比适应:$ | q: s& d; M6 O2 Y, f
以下是引用片段：4 H* d5 d& K7 {# U4 `/ r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, K0 b1 E" A# c I) p<html xmlns="http://www.w3.org/1999/xhtml";> 1 |$ u- o5 ?: {2 U: G+ p! |. A% T) s
<head> ) Q( G$ [* D8 }6 `/ X
<meta http-equiv="Content-Type" c />
( g& S/ r* R# F- T( q' f4 |<title>css2.0 VS ie</title>
; Q+ b: O; Y$ s& q; N: S* {! S( N7 V<style type="text/css"> : Y4 B% G% z3 A% Q7 o% A4 l
<!-- % p. W6 c( b) Q- E6 X5 |7 K2 f
body { " d4 M/ ^8 E$ M! }3 |4 y
font-size: 12px;
L. t/ M& d) Z: xtext-align: center;
5 R; \1 `/ Q) \) F: R7 Lmargin: 0px;
0 u. E; P: q, Z( `: F3 _padding: 0px; * k) y$ H+ [9 c$ ]8 B* Y
}
) X; x4 ]2 @" ^$ k2 s" b#pic{
9 @- O. @! a. Q4 h margin:0 auto;
+ T, v* a# R* Z: i- g8 I width:800px;
# L) }2 l! T" h, Z padding:0; . `4 t8 S2 |$ M- T
border:1px solid #333; " @) G8 H4 C4 k6 Q
} 4 w3 K, l* X" D
#pic img{
' L* D9 Q8 x9 \0 A# V! e max-width:780px;
. Y9 O8 V$ t. ?7 [7 v+ ~width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 5 u! L: Y+ I- E( O& N- }1 Y- M% u# }
border:1px dashed #000;
3 H- h+ t. S: j& |: @}
6 K0 a& x7 |% X# Y--> * F* L; ]$ S) y+ V" |
</style> F! M/ \. p$ Q' Z
</head> j8 j$ T8 I5 {: ~7 d
<body>
, v6 h F" X* j. v2 N<div id="pic">
# O6 q# D- T8 }: i; }5 ~" Y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' r0 L. S+ d* X9 ?</div>
1 F( n7 _# T- y# l$ ^0 b! @, B$ m</body>
* Q( r1 S b8 h% a! o</html> |
|
发表于 2007-12-8 14:55
| 