|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. ]! |- d! L" v; o. j) z. g! L关键在于：max-width:780px;以及下面那行。/ G, {4 T/ W' g$ u# Y
固定像素适应:' C/ ]- u8 Q8 I n
% J4 t# G$ I. F/ mdotted; 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> 以下是引用片段：
& ~- D8 l" J& c9 I) T<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 [& N! k. e# i, ~. _, O
<html xmlns="http://www.w3.org/1999/xhtml";>
0 N, ?5 A8 s3 z X- j<head> / Y$ X; x% j, U4 ?4 p
<meta http-equiv="Content-Type" c />
4 H y* L+ L4 N# T: s8 J* `<title>css2.0 VS ie</title> 9 b; S9 n2 {4 x3 \, M
<style type="text/css"> ' t% z2 G, w$ b9 W2 ]4 s
<!--
1 A# O3 E7 {5 a+ a& \7 wbody {
: E" i4 A& o$ o# E1 j v9 Q$ nfont-size: 12px;
9 K1 z/ [0 X: I2 ntext-align: center;
: H9 B' ^' p( b# D9 S9 s3 T5 E4 ^margin: 0px;
9 g& `2 _9 l+ ?2 ~, t8 S; v, l" epadding: 0px;
+ h3 L5 H5 O, y5 w, q}
$ g0 G3 D: n6 I4 @9 ^! l" V#pic{ $ b: S. d# s' Y6 Q3 H) }/ [
margin:0 auto;
$ I+ b) E* O# h# a width:800px; ) U; j+ U9 w8 z8 s2 p* l7 }. j
padding:0;
& q7 p3 F: U+ I! f border:1px solid #333; 8 j! }5 c& J. c2 h0 c
}
: d% g0 J! {0 |& C#pic img{
$ A' e; c" x) n4 p max-width:780px; % x# Q; l) V: X9 E
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ~# |1 ^' j# ^4 Q6 T' f
border:1px dashed #000; . S: }" p: K0 Q- `- u8 a
} 0 S7 D' l2 |3 u
--> 8 `! J2 X, @3 R7 p
</style> & L" N; A: A( Q& s5 V! |: i; \
</head>
$ R8 z* n$ n! I<body>
! H4 Z/ D, D4 Y* m<div id="pic"> p' }4 i C$ Y5 A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 v0 i3 Y6 H$ T% O5 `: X$ G
</div> ' v3 j- g# L l1 z: h, c
</body>
: Z6 d$ s3 w5 H</html> 6 e& O5 _! \+ w& i0 {/ \
1 H# a1 L: Z/ i! E百分比适应:
5 u! M$ t1 d2 s' `- K/ w* ]以下是引用片段：
" I, M, @7 v1 X% j! k! H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 J, p5 Z9 o+ ?( t<html xmlns="http://www.w3.org/1999/xhtml";>
. z; R2 N' z. u% ?: g: V<head> 7 F9 } B3 N& R% b$ T% Z
<meta http-equiv="Content-Type" c /> # ~# Q, s! a' d0 T5 q
<title>css2.0 VS ie</title> , S; G, ]2 V# K& r" A& L7 k, ]/ X0 Y
<style type="text/css">
1 k: a: g5 W3 J( d<!-- ( m9 S% _+ |2 W8 f7 @# K
body { 2 z* o: A+ W+ x1 I& R. B/ E
font-size: 12px;
W; v+ a0 \8 `- E! A1 jtext-align: center; 3 K# `# B% j, \) a. L3 z- O% c+ f
margin: 0px;
$ O% r& b, L2 D/ ^padding: 0px; " X5 S6 h, T8 r
}
" w/ ? B+ P; m#pic{
! h0 x W% W. j margin:0 auto;
3 ~. p2 F9 m) }! Q/ N* h width:800px; + F# Z4 ^* J+ P; W
padding:0; ' V2 n$ ?6 f& l" U
border:1px solid #333;
, O }$ U3 s( y6 i+ P } ( x9 y4 G0 N; k' @/ ?. a+ _
#pic img{
) U/ y0 s4 z! m3 V max-width:780px; & Z/ R3 C |+ J1 H' B
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 @; D+ I8 w! A$ i- U3 W% L3 e, Wborder:1px dashed #000; s" W+ \4 o- i" c- D$ ^5 \
}
. G' C/ \6 _- G% J--> Q5 c" t8 x: ?1 y
</style>
& C+ O" Q3 i: k1 \. f</head> # v+ ~( k6 [8 S3 K8 v6 w+ y
<body>
/ h1 x+ m& {- ?; t" b<div id="pic"> 8 G# B' _3 Q9 [: q! ?& r! n. ?: _
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 E0 t" H- `/ u6 s8 R. y, S/ q- A0 k</div> " ^( W* G! S7 [0 }& |3 V( D0 R. K
</body>
; Z9 ?) p* R& V: q! |</html> |
|
发表于 2007-12-8 14:55
| 