|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14391
- 金币
- 2481
- 威望
- 1647
- 贡献
- 1429
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。6 f- L# _7 ^" v$ W* D0 z
关键在于：max-width:780px;以及下面那行。. ?: [: c" X+ `( i
固定像素适应:& `' Z* g% s3 d& R+ ]: N0 K
; N2 v i m) a7 [( Q ~" xdotted; 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> 以下是引用片段：$ c* i& T6 x5 k3 j4 N* \: ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* o( i r) j1 k/ k<html xmlns="http://www.w3.org/1999/xhtml";>
! d9 G" d2 b% q T. r* S# i6 S) {5 r<head> 0 o; b1 P9 t% M( c; m
<meta http-equiv="Content-Type" c />
* R: V& H5 f5 P! u<title>css2.0 VS ie</title> ( S& s1 S Z- u: R1 w3 l2 c; a" A
<style type="text/css"> $ U0 m. {' [. R1 }1 e; [) v
<!--
+ z4 |. e' l' Y# qbody { : b; q" Q( L \- k- i+ m$ y
font-size: 12px; . [+ q5 j3 P- U5 ?& h
text-align: center; 1 ?! e8 L6 E, I. { i+ y
margin: 0px;
4 ~) \& C* I, ]& Apadding: 0px; - U( m6 @! |0 L" O3 Q
} - Z5 ~% f9 e% Z- m9 Z6 S
#pic{
& M0 R+ h% j1 j* k b! ? margin:0 auto; $ J8 P0 n7 l5 |' @2 d2 |4 X3 a
width:800px;
. `2 h( P8 ^: `& K! a. q padding:0; ) ?9 y" f% {" t, J
border:1px solid #333;
2 g- L; Q7 M. \5 M }
: T3 y- U0 x I/ l; v6 }; `) f#pic img{
- h- ?- |. l7 p max-width:780px; , g/ K1 x3 ]+ ?) z- \7 @
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 \& i" B; J) ?6 y
border:1px dashed #000; + `" p o/ U) i" \3 B
} " H" E/ ~: K; q6 `
--> Q) [0 e- N& g) C, A- i! @: }9 {
</style>
6 _% H& \" N3 S& U. S4 W7 h9 I</head>
) f8 ]0 x7 K5 n0 O O' z5 e0 u<body> ! e0 D i2 A. K' h5 R& z" N# F
<div id="pic"> + L; f$ I% \3 p. {1 B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! Q4 n+ |: b- B6 ?2 L8 y( e
</div>
B) b5 S2 I0 H G1 e</body> $ D) i: P- B( ]- c& r. D
</html>
7 g$ B7 J. [' I% a- b7 e9 o, t7 R! ]4 Y) e' z
百分比适应:
5 ~( p" w6 p0 c% ]以下是引用片段：! {7 Q* o6 o$ G. h+ {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 c( J% J8 P( k! C& Y<html xmlns="http://www.w3.org/1999/xhtml";> / @8 r5 V$ b( q' V) @4 m, C
<head>
$ J6 c7 [2 d6 E: H<meta http-equiv="Content-Type" c />
+ G3 s5 t- f$ O<title>css2.0 VS ie</title> . j% V. G5 Y0 H2 N
<style type="text/css"> / y w6 V) c: H# l
<!--
) s9 d$ a8 ^& Z8 i% U3 S. pbody { . _7 q" ?0 @1 G& R- b
font-size: 12px;
, e, o4 y N3 B' n' q; C! A" s5 qtext-align: center;
5 j: s, b. Q3 U' \margin: 0px;
) Q6 l/ L& t9 A. O) J1 k) s! t Bpadding: 0px;
% Z" q# A" N. U6 m( @} ) ~1 g% N; q% ^7 F
#pic{
& \! Y$ B; Z+ ~. r" D8 @ margin:0 auto; , H Z% j& `/ S4 Q( h
width:800px; # Q. L9 g" F# `% I0 [! i
padding:0; 4 f- r. F* t9 _1 ~8 q8 @: D. l& p3 D
border:1px solid #333;
" _/ p4 {2 }( u; ~7 P } + c5 |; R. B6 R$ m5 e8 P1 W% T- U+ V
#pic img{
4 k; [) x) X$ q$ V. n max-width:780px; ) z7 O) P; {! b$ ~! l
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ; Q( T' m. S: y; |8 ^+ i, p3 Z
border:1px dashed #000; 4 J% V* Q, g1 ~, j# p
} 7 j2 M. K$ ^2 d9 W
-->
6 y0 f& |) J: [</style>
( z2 J" |* S8 q7 L0 c; x8 L. w</head>
' B) |& [6 T1 E$ a( \, F<body>
2 K# f/ G: k8 Y<div id="pic"> ! l$ `9 i, ?! {5 d q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 j+ g( s) G; k3 d/ `# U! ~</div> . ^% r* S1 w5 E- R
</body>
6 w" e+ M- b* ^+ K$ X</html> |
|
发表于 2007-12-8 14:55
| 