|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14397
- 金币
- 2484
- 威望
- 1647
- 贡献
- 1432
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ p$ s/ z9 q' Q( N6 h( n- M关键在于：max-width:780px;以及下面那行。
) U& ^# b" a) Z固定像素适应:
" z% o( F; l! u2 V; v% h& g6 \+ E* q' @3 V7 ~6 B+ j3 B. p! \* ?
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> 以下是引用片段：
5 p9 V1 Z" ^$ v C: Q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ }/ G# L% {# a5 ^9 D<html xmlns="http://www.w3.org/1999/xhtml";>
d9 ^/ P* r# x/ Y<head>
+ b- u# K, ~& |: c, A<meta http-equiv="Content-Type" c /> ) s/ y. m4 }3 A% L, h$ i9 [
<title>css2.0 VS ie</title> 5 ` l% I: e, Q: N. Y
<style type="text/css"> 2 r* K6 }) {* z+ i* ]% _
<!--
0 p: r' l. q4 a& U4 |+ \ fbody { # l7 G2 H& Y5 P( l
font-size: 12px; 2 J$ ~ Y5 L) E" v" E3 S- Q3 W
text-align: center; 5 t$ q" k) O3 i4 X9 u1 [
margin: 0px; . m- ?* R! |4 g: F9 K8 e
padding: 0px; 2 C/ L. @0 O6 _( Z5 h2 i; u- W
} 0 C% U1 y. ?6 i% F3 l
#pic{
G* Z4 p6 x+ t) F margin:0 auto; 1 L: C+ Z2 h2 n: R
width:800px;
: r. S8 x; {+ N$ U" i padding:0; & K0 p* P2 _' F# V2 @, C/ w
border:1px solid #333;
6 T% i' ^4 T1 S9 j } 8 o0 c6 p8 i& L
#pic img{ 1 G0 ]5 B* ~! Q B$ V" {2 s
max-width:780px;
( ]8 |, j: V- kwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); * m$ g8 l) \# m* Z
border:1px dashed #000;
/ e3 r# {2 ^ B) l} # Q/ F6 }' x: Y/ S0 X
--> & P, H0 q3 ], o0 R
</style> " y3 j9 l: l9 j% K. j8 ?3 f1 N
</head> ' i4 l/ r9 y$ i, a* a# `
<body>
- }$ [: w- u+ K$ \- f* X8 v<div id="pic"> 6 a- S9 v* ]& L2 |) ? C
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 I% e+ [5 `0 V1 `</div> 4 _5 I9 \! w9 ~
</body>
b. k5 f0 ^- n7 |" s- L</html> # I! C% p* f( ]
4 \6 u1 f! B* x1 o0 B2 D: d' ^
百分比适应:
3 J. n! q' z, f9 j# C& c# p( f以下是引用片段： i& f) [2 [; p: o5 z9 C; ?; S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! l; L& g1 c9 ^, n; `5 k
<html xmlns="http://www.w3.org/1999/xhtml";>
2 c& e5 U3 A/ C5 H* v. ]<head>
4 v7 T, W- Q4 h# k<meta http-equiv="Content-Type" c />
5 a9 J5 w+ ~8 J% J# t<title>css2.0 VS ie</title>
$ O- R9 C) s. c) ]. C<style type="text/css">
6 f$ D2 A, N. ]' z0 d9 e8 o# w: M- |<!--
! J' J( `$ T4 Y4 w4 K3 K" c; C) jbody { ; B/ d7 }$ F# D: N4 R. Y# v
font-size: 12px;
+ c' z1 _: u; ]% ]/ p3 @# o jtext-align: center; 3 f2 X8 \6 O1 F8 y
margin: 0px; " D2 p2 e- _5 {! Y7 D
padding: 0px; # D2 s( x! S' B& m! B& O; Z
} / `! N: ~/ z: u
#pic{ ' A2 Q0 ^+ r8 ]4 R6 i# d
margin:0 auto; 2 d6 g/ @- a4 {* e
width:800px;
! u) g0 ~, V+ ?9 @5 ]! g% S# q padding:0;
: P' ]) S) h( P border:1px solid #333; ! U3 U5 N7 O u, \& ]+ P. D' O' {
} 9 ~1 D! S) J& E& W$ ?: o
#pic img{
: \, ^ P6 }6 }; D* C max-width:780px;
* ]# n1 Q! }4 Y) |7 V7 j% @$ twidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); A, I, b+ l% z: Q
border:1px dashed #000;
o4 x6 m# n0 P}
" `- F }) k4 n--> # m9 G! I1 l; ?1 R
</style>
: c9 q# v4 q1 A+ R+ Z8 Q</head>
0 C- a) j5 T5 e! u* T: Y& K<body>
( f, Y. M; k0 v; b: w9 X<div id="pic"> ) }8 {. m) b; A5 N3 G, O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 N8 B* R* P) `1 l. g& ~4 P# N- F, o
</div>
5 _4 j; ]* w/ j" O' [- t/ i</body> * h' B) X/ M5 B8 S. l/ o# _5 t) a& s
</html> |
|
发表于 2007-12-8 14:55
| 