|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14417
- 金币
- 2494
- 威望
- 1647
- 贡献
- 1442
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' O6 Q! H/ [0 Z- V0 ~关键在于：max-width:780px;以及下面那行。# f7 Q6 b# X1 M( \
固定像素适应:
. g/ e, L9 U1 S. T: \& K8 j0 K+ f a7 g! t; p) l1 w" A
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> 以下是引用片段：& o+ e% Q5 d9 l# k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> & }5 k" B A3 G0 ^8 M
<html xmlns="http://www.w3.org/1999/xhtml";>
, P5 g, a3 A) v( o<head>
9 P+ S7 w5 i' }7 l3 x6 L5 h4 \<meta http-equiv="Content-Type" c />
8 d* u& q* X9 L2 q4 b6 C! {<title>css2.0 VS ie</title> 9 h5 u$ i5 B" ~( n0 E8 [
<style type="text/css">
" o Q U9 a9 e$ R5 F8 A<!--
! \7 [' u% j& T+ R# _/ v! d' K0 \' abody { 3 k: H6 t8 r: s4 C
font-size: 12px; ; V7 Q: ?9 K% F6 t6 y4 i( [8 R! |
text-align: center; 1 a/ s" }+ ]1 i" j4 v
margin: 0px; 8 B' z) z4 y0 j
padding: 0px; & O3 X& z8 H3 Z n6 }$ k; |$ l; b
}
: m/ E' @1 \' h% K: H6 v#pic{ 3 @7 f* P& M' c& B Q6 {1 P0 V
margin:0 auto;
6 y) `; H# T! n4 w width:800px;
5 F8 e' o" S6 b" @, |7 O. Q padding:0;
) y" j: C6 z% x7 t3 b- y# D border:1px solid #333; + U* I, ^ d, ?+ }2 }) H; M1 l
}
- K* y$ W, m& C% M: ?+ }#pic img{
& A- Y' ?4 n9 G; V/ m6 R max-width:780px;
) C: s' y" f1 |width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ D, |2 F+ R% v2 E2 u& g% x( Sborder:1px dashed #000;
0 K h, ~( C/ ?. B2 B: u# u} $ p. h. P! i% p7 T a
--> ' J7 e. X$ {2 e) I
</style>
; @4 c. y4 V- H2 ~6 j! s</head> & g$ z( n7 l* H5 J
<body> ( f/ ~( O& @4 a3 v" E
<div id="pic">
- r+ B0 Q! s+ d6 c# V<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % Q6 B& L- p) i6 U8 I
</div> ) v0 P2 X5 S# d2 G3 c0 x
</body> ( w' Q5 Q, u7 v% q8 j6 i4 G& L
</html>
8 y) ]6 r$ N& J. ?
' ~; ], T+ f0 | c9 |$ Q7 f, O百分比适应:
2 M- c5 x t$ b$ _以下是引用片段：
3 V( v. t) c6 }9 j9 c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. X ?" a1 O1 e, J s3 ~2 ^<html xmlns="http://www.w3.org/1999/xhtml";> % v7 }& i& p: d
<head> # W/ \. R7 e V$ s9 D
<meta http-equiv="Content-Type" c /> " f. M9 A w4 g+ _9 l X
<title>css2.0 VS ie</title>
" h D% ^/ m6 y6 I<style type="text/css">
% e/ @# z5 s, K7 \0 H" I<!-- ! }' ]; T- ?$ U5 V0 c
body { . ]9 ~( f _0 F2 V0 N9 s$ u
font-size: 12px;
0 c9 I9 e: O7 Xtext-align: center; ) C% K6 X5 U& {0 i
margin: 0px;
, h0 G) K; M( H5 ~* b& k8 t" Epadding: 0px;
# s s Y8 a* n* x# k* Y x}
w/ l# o9 Q* S" W; G#pic{
$ N2 ?8 w: @, Y3 V8 v margin:0 auto; 1 E: y4 {1 P! g7 B
width:800px;
; H6 ~( ]2 _/ H; f9 _0 g6 M( O( | padding:0; ; B% J2 B k9 F- [9 o
border:1px solid #333; 6 G9 G, X! w, V4 C2 K
} ; v/ [6 Y% Z4 D
#pic img{ 8 b. t4 L* x7 o; H
max-width:780px;
; Z/ t4 g# E z6 Fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); U) |5 I: ~. W/ V
border:1px dashed #000; 5 [0 C. k i$ z; u9 ~" `
}
; Y% D8 }4 c# \- R5 ]-->
7 n4 R, ~7 t. K' g2 \+ W+ Y/ i</style> % o$ X. e- ]2 V! P7 \/ ?
</head>
/ k( L6 a4 i' T<body> " l* V0 S8 L2 |9 w9 v
<div id="pic">
: P4 W5 C/ ?" l& ?1 U% ]; @<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; l3 N6 t8 o8 U- J: D
</div> + L8 A* u5 ^# h7 X
</body> ; R/ \$ _; N5 I. O' q& \( {
</html> |
|
发表于 2007-12-8 14:55
| 