|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14311
- 金币
- 2441
- 威望
- 1647
- 贡献
- 1389
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。3 e' q4 M/ M, [; n' w/ V1 e8 s
关键在于：max-width:780px;以及下面那行。/ G; ]& y- K% k. |4 b' m
固定像素适应:0 ]+ V9 y7 v9 z+ E: U0 Q. D, o& g
9 w3 }" O* p1 X- F" r
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> 以下是引用片段：
8 B% j$ ^ [9 z0 B<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 E/ V; k. @0 A& `
<html xmlns="http://www.w3.org/1999/xhtml";> 7 R6 ]8 H$ n3 A, m& e
<head>
' o" |% n& m/ o s<meta http-equiv="Content-Type" c /> / f. P' @3 s3 w: q# D& E' g
<title>css2.0 VS ie</title>
8 _& l Z2 E/ D5 u' b# U<style type="text/css"> " `- w' I+ v' Y4 G* K
<!--
% H4 M5 a9 t, ~3 Q$ {& rbody { ) R* h# \+ z7 o( l5 f" t
font-size: 12px;
- D* S: s; i: rtext-align: center; 7 r5 {; U3 R* w9 K
margin: 0px;
. r8 \/ H$ k" C& [% v% S2 U* upadding: 0px;
! L& Q5 R8 \ Y- W9 e/ N}
7 P! h0 v: ~! p: H#pic{ & R3 B$ [, w" O7 F
margin:0 auto;
B- u/ [4 Z+ V+ u' v width:800px; - i9 F3 W3 n6 d7 K
padding:0; & x6 L# l, i" }5 k7 J- O
border:1px solid #333;
* }: W! o$ n9 P% ? } " X% {" \2 j2 f0 Z, i4 T+ B
#pic img{ 1 a1 n# b7 _0 N$ l6 j
max-width:780px;
1 W! [9 K) P$ C% Q/ I6 M# Twidth:expression(document.body.clientWidth > 780? "780px": "auto" );
* m% g0 M& h- w# f8 G; U% qborder:1px dashed #000; + @7 Q3 q f% d2 r6 B+ ]6 j4 A3 ?
}
2 ^/ R J! J q* `" ]+ T--> # {* P0 u( I; Z0 ~$ P+ m8 l0 ^
</style>
7 N1 p. k* b) q</head>
/ ], K$ _/ h% r9 j8 Z5 ~' s<body> ! ]& M) s9 J/ g6 {9 B3 ^8 t: u" ?
<div id="pic">
8 A7 v- N% b" L9 s7 s& l' d<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # O* h0 p: n: u8 L; F$ m
</div>
+ {. Q: L: l8 {</body> B8 M3 Q! ]6 a) L- ?9 Q
</html>
9 w9 D5 o' r6 F5 W1 X
* H# s* b* ?) t( a$ E0 [& a* d百分比适应:
: h9 y$ l+ c. c5 [, M" M/ o Z; ^以下是引用片段：7 A* p/ p# T1 {. c) E' ?' Z& L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ( g' C0 c' h. M3 r" S
<html xmlns="http://www.w3.org/1999/xhtml";> & K* y; T' X: L2 Z" f$ s
<head>
- j9 h" C: ~& k/ D# t) D7 e<meta http-equiv="Content-Type" c />
1 Q" s! Z! S8 s3 z+ g<title>css2.0 VS ie</title> 0 h# O) @+ h! f
<style type="text/css"> , C- C4 b: n) ~
<!-- ) p. M9 g) N+ d" c
body { % T- K, P, i6 K+ U
font-size: 12px;
, \/ b* D1 {% c/ b. Xtext-align: center;
. m. C1 s+ d5 `0 }+ Dmargin: 0px; 6 m7 x3 f! ~3 y3 A2 a- o
padding: 0px; 4 k N6 h4 U; U1 i! _( r: }
}
, R1 d: @3 X* x0 q#pic{
& |$ q* |, Y* y margin:0 auto; 0 ?; @" D; Y3 Y' [
width:800px; ! {9 Q: h: U+ v/ d0 \7 r
padding:0; % ]# g2 [/ Q+ W9 o. }2 c
border:1px solid #333; * b# ?6 j2 e9 b( a: `
} * f3 Z: G+ {$ a# b+ d
#pic img{ 7 ~8 t7 Q1 z+ S& x; o% z3 h
max-width:780px;
, h" ?& p; A& twidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 1 Z! J: L0 A, p( T$ V0 t
border:1px dashed #000; . |! u( H0 ]" q
} - E6 h7 C8 Q) } U+ k/ w
--> / C9 _0 V# [8 p: b
</style>
5 ~# L" Z$ f' V; z. R# `</head>
3 h/ Q, ^ a1 z) R; B5 B<body> 7 b$ R4 i3 d" X7 X* r7 ?! Q+ }
<div id="pic"> % [2 F3 i; _$ Q) ~5 N+ {
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' k" x7 x7 K. T" W# r! b
</div> 8 n! H7 J2 T: t5 z0 t$ A
</body>
6 t5 Q/ x. e! b; V7 r: t9 ]) s+ w: ?. V</html> |
|
发表于 2007-12-8 14:55
| 