|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14397
- 金币
- 2484
- 威望
- 1647
- 贡献
- 1432
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ E' D. R: R0 a& f P
关键在于：max-width:780px;以及下面那行。0 b: D# }( q/ W/ ]; Q$ A( m
固定像素适应:
: L7 u) r& W6 Q8 g( V, i- D
S D9 Y4 ^' R# {$ ]) gdotted; 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> 以下是引用片段：
9 A" L+ d6 o" p6 f. `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ b' g5 o7 F! R, x0 z+ b
<html xmlns="http://www.w3.org/1999/xhtml";>
7 Y4 L z+ D1 X4 ~9 ?<head> & f; J# z! j7 N
<meta http-equiv="Content-Type" c /> 2 m: i% ~+ R# i9 U3 H
<title>css2.0 VS ie</title>
+ R% ?# p# X# y<style type="text/css">
0 T+ |$ C8 p. K$ F' p<!-- 8 j% s, M" }7 I5 [# q
body {
+ t" _0 W9 E% }9 I: s( x+ u' [font-size: 12px; & V* Y5 k; l; u) q
text-align: center; " T' C- f! |- z3 b7 G, {! N) K
margin: 0px;
3 v4 H: S3 D P( ~/ [padding: 0px; ! o, y+ N1 F0 Z# y4 z
}
, |* l. ?4 r- J, ^& B1 }#pic{ - |9 L& }* ]& Q, l' e
margin:0 auto;
' j% Q6 C; @4 r/ A width:800px;
# a) U, ~) }' J* p padding:0;
+ J) A3 _$ ^: a0 d J3 e border:1px solid #333; * _2 r$ v* [2 M9 ?4 P/ }
}
H# p1 g+ W0 J#pic img{ 9 J* R4 i$ l' m Z+ _
max-width:780px; " G5 M* P# D" |3 G' B0 r
width:expression(document.body.clientWidth > 780? "780px": "auto" ); % b: o Z' Z- _7 E: c7 w0 f
border:1px dashed #000; 8 t. C9 U+ E/ E: _0 A4 T+ Q
} 7 \! b4 a' h0 b/ \) b7 x
-->
. ^- I7 h. @$ @0 w% w4 q, o</style>
1 o1 e- N$ Q2 F1 K</head> / |0 z" ]+ a+ K7 O' {
<body> 6 V# h6 v+ G6 A) e; q' A4 B) U* y
<div id="pic"> $ u, i0 ^! J; d
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 E' C; W% S8 N</div>
* H7 m# z8 i0 s% M+ }</body>
! R" p: h; S& E* _! K a$ w' j</html> 4 x( R. `' {# `1 K
' {2 z5 E. D- u/ A! y6 z; W' }3 j百分比适应:
6 k9 _7 E' F% f0 M5 \1 g5 J以下是引用片段：! Y$ j' n0 b9 X% {7 G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. E) R- K/ S# {( V& U& b/ }) i<html xmlns="http://www.w3.org/1999/xhtml";>
2 y) t' I. }7 W' Y$ k2 v: w<head> ( X# v \9 o$ \
<meta http-equiv="Content-Type" c />
1 g v% |$ I5 F p# |- E<title>css2.0 VS ie</title> ) j4 b! e8 }0 t$ ?0 r0 f
<style type="text/css">
& v; P, s% f) i @* R% q( [<!-- . _8 I' f: r, _4 |0 S2 m
body {
5 r1 f" g4 U$ V0 j0 X( J+ efont-size: 12px; ! B1 Q) f( \7 F! z( m0 u
text-align: center;
: ` b, q$ P3 {! a* ]$ ~# umargin: 0px; * F& @. _! Y ]9 k- |6 ?2 {
padding: 0px; ( c; K$ d2 D% u3 ^" \3 ^
} ' E* O2 d& X o# \# r$ o$ g( i
#pic{
1 }. @& I0 \9 f2 S2 C& D) p) ^% Z margin:0 auto; & Y! L$ @" E7 D) J, G
width:800px; ' f8 T, ], |: {
padding:0; " b% Q, [6 A* Q O& y6 l& D3 ?# t
border:1px solid #333;
! ~7 T( @% h, E) S; K; h5 L } ' d/ u5 w6 k7 w6 `4 A' o q
#pic img{
% X$ c1 s( p0 R1 B* ` max-width:780px;
7 [1 c Y( B( ~, ~& T& r2 G+ k9 qwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 F8 E& W( }" H- gborder:1px dashed #000;
" J5 Y; q Z# n& P2 c4 g% t}
% G& l# H& G4 F' ^" |3 N5 u$ x--> 3 N. t3 y8 p, Q/ a- L
</style>
& M/ I; B& X' t2 ^' y! a. h</head> 5 p7 A% e# F9 e' C% f$ J: a9 u
<body> # g2 d O9 V4 g g8 L+ ~
<div id="pic">
4 b% Y8 r' A+ b( N<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 d% {6 A( i o" |</div>
2 q* N1 e$ t- e. G6 _) `# n+ X</body> 4 s% I) X! i/ q6 T: @* a
</html> |
|
发表于 2007-12-8 14:55
| 