|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14423
- 金币
- 2497
- 威望
- 1647
- 贡献
- 1445
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。# E: E% g. s' q) @( ~0 v6 {* k
关键在于：max-width:780px;以及下面那行。
* I8 _! C0 v4 [, }, U6 L( @' ]8 E固定像素适应:
! k1 z s1 a5 }4 n# b' Q9 b# H5 D, ^/ w% O) G) Z
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> 以下是引用片段：
) S- O+ k9 N$ b% j9 r; q' g# B<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' m) j$ U6 @7 {1 ]1 ?6 `
<html xmlns="http://www.w3.org/1999/xhtml";>
' W& Z5 _! C% N( r) b) ?<head>
- `2 \+ `- e, l8 r3 P. E' G<meta http-equiv="Content-Type" c />
/ r: ~: a( p$ ?6 [<title>css2.0 VS ie</title> + z# e* `6 e& F- G
<style type="text/css"> 3 ^: ]5 m2 g+ E9 l, S0 N- n- Z
<!--
( W: \* n. Y$ j, p$ ]body {
( S- M; ]0 u, S6 \2 h/ ~font-size: 12px;
+ I3 C) r! k) P" Gtext-align: center;
$ O$ n% B8 i ~/ J) O6 w1 v& Smargin: 0px;
/ w( r( T: e* A `padding: 0px; 6 W. @. t# }; i0 f* P
} " T" }$ X# i! k$ q1 f' m% }* |
#pic{
; R5 r+ v' r8 g( u, ? margin:0 auto; 2 k n% t% P3 u3 d
width:800px; 9 m) u9 y" m4 J
padding:0; ) S" S& b7 }. ]) n. b) R* c. i7 i _5 h
border:1px solid #333; + A# s1 Q/ z! a$ O x/ [: P' s' O8 _
}
! |+ r, b( v2 a( [" k4 h: x#pic img{
! F6 a; V5 r# q& i6 D max-width:780px; " }+ {, P; }( X( B3 @0 F& {
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( b0 N( s% C/ b0 a2 O2 f4 pborder:1px dashed #000;
; C' H; K0 R9 {3 O/ O6 E}
+ D; l6 v3 y$ G1 J: O) ]--> / ?, S) d# A) |# A' W' |
</style>
: d E" T( m0 s# x& T</head> : M& z% J3 X& Y& P) w5 Z$ s
<body> & q7 m# U- w, @0 k* c7 O+ v4 p
<div id="pic">
" n* N5 p8 r. F" @! p+ x<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 K* E1 G; ]% |& B
</div>
& e; O) G# n* Y</body>
( z1 r# O7 ^; O) s$ ~" j8 M& z</html>
* A% g5 |+ a2 x/ F# Z( b/ Y' p
: d) ?$ ?- t4 ]/ W! ?百分比适应:' U) M9 p9 I- T/ q6 G
以下是引用片段：
) |9 Q! J: y9 E7 P: E5 Q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * W: |# d R4 B8 e; Q$ T! P1 X3 O
<html xmlns="http://www.w3.org/1999/xhtml";>
) ?$ W- O; U- C' k! D9 p<head>
# Q' X6 r: O# w' ^<meta http-equiv="Content-Type" c /> . R* r; h& H3 p6 \4 W0 U% W
<title>css2.0 VS ie</title>
. w/ [0 u# o* V: }6 b Q<style type="text/css"> & ^' R8 d- f- \: l
<!--
2 a" m3 e0 R2 z2 d- T8 q8 O9 J7 R0 Mbody {
8 F9 C) P1 u$ C5 e% c J( J8 `0 pfont-size: 12px; / j: U( l$ p% G
text-align: center; # \* s, x1 p0 P9 j5 F$ j
margin: 0px; - L$ \. n# \/ C
padding: 0px;
3 G+ R9 E/ ]: I* e( |8 s} 1 x7 J: G- w$ G% I4 O
#pic{ . b @$ ?' `3 i5 e$ a
margin:0 auto;
+ |! M# e$ j$ G+ r3 H7 [5 n width:800px;
+ W6 @' i, [! W padding:0;
6 D# @6 o1 f. p) H$ J6 | border:1px solid #333; `+ c7 E1 A4 T: p8 o+ @7 Z) z
} ' Q. l! U, i2 q1 j
#pic img{ 6 N. s' K- X% m! n) C* \4 o
max-width:780px;
4 o3 ?0 V) L2 c1 `& bwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); * \$ c1 O3 ~. [/ n6 a" L
border:1px dashed #000; + k! s" `, S1 o' R1 A) _/ ~
}
; }6 R" R6 P( R, G--> : r+ E8 M) u' M t/ y
</style>
. |8 T W+ p3 s5 b</head>
5 q: k! C5 v: M9 F' t, E+ G1 R/ N<body> / u- {! E o3 u0 {/ w
<div id="pic"> 1 T& w6 a1 z( h6 ^% S/ o1 n1 W
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - L/ S# D& s. ^1 r. r% v# m5 V
</div> 5 p: H, [1 h( E( F8 G- Q" `
</body>
- b; l' S- D2 ~% ~" b6 M0 [ V</html> |
|
发表于 2007-12-8 14:55
| 