|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* ^$ p I/ F) D- x( {
关键在于：max-width:780px;以及下面那行。6 s+ G2 j; X7 {/ z! }) t
固定像素适应:
2 ~" K8 A/ y) D l2 |3 F% h" N! ?5 t7 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> 以下是引用片段：+ i- o& [. v- A/ i$ k5 g# u p# D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 r- T: ?# g4 F* ^/ z }
<html xmlns="http://www.w3.org/1999/xhtml";> ( |+ m6 L/ M& c' p7 F
<head> - R/ e' h6 {$ ?% r! h
<meta http-equiv="Content-Type" c /> + N! |' J2 I5 ^- s0 U
<title>css2.0 VS ie</title>
! q& X! m' f" U<style type="text/css">
5 `2 O9 Z6 C' x$ E5 j* c7 w<!-- $ v/ Q; D6 N2 ~ j1 K! P7 \
body {
/ k3 g0 n& q+ b7 |( p8 ffont-size: 12px; O7 Z. M& G6 E; P
text-align: center; 6 f2 k. N+ a* H( l+ \
margin: 0px; % V# {: [- V" w1 D1 z3 m
padding: 0px;
1 G2 u0 N; Q' g% \( q}
3 h9 t6 u d( u1 X% z' q+ d3 t& _#pic{ & Z! k# A. i0 ^3 M2 z8 l' B% q
margin:0 auto; * ~' C1 }8 |* C% S% y
width:800px;
# ~* Y8 V$ A) X% e( s& N padding:0; 6 ~- T! ~( x. v/ k& z! n
border:1px solid #333; |) |2 `6 }- c# I D5 C% B4 U5 j2 m* ^
}
. N0 ^3 ]6 q9 d1 Y o#pic img{
$ r1 V( L9 M$ r max-width:780px;
: O ?) q; x1 a) [* rwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
7 t9 H+ g& a Y0 c! N4 H. N" x4 \/ \border:1px dashed #000; / G. v) }; \1 c: V
} , w' e* A2 r( u0 p+ p3 u: x
--> 7 }3 w9 D6 z8 [1 n" K4 h
</style> % K+ i& I6 g% j( \6 E1 K
</head>
/ J6 Q; n) [0 M' d8 V<body>
& `- G0 h+ X# C2 V$ j) Z<div id="pic">
' R" k: o3 i c" P: b/ ?/ r4 e<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * X: c/ ]/ P! h- [9 m
</div> 7 o- _( W! s; Y2 R
</body> % J$ ~& l- {% |
</html> % G% s R8 [6 [' j/ C
; k- d& ]3 J ^: C. w
百分比适应:+ J. i/ R0 o4 R
以下是引用片段：& T" U9 p, c* Z% C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) H. H7 s! ?9 @( k) g2 j6 p
<html xmlns="http://www.w3.org/1999/xhtml";>
# m) Z! w% d4 C/ O/ |5 f4 l<head> - J" P- j, z. z3 u/ @0 y* }5 E
<meta http-equiv="Content-Type" c />
" c8 o0 S" {6 t1 |9 ^<title>css2.0 VS ie</title> & {% T! K5 X, O7 e
<style type="text/css">
" y6 v0 F! P2 j* A( P9 n<!--
|! t' }3 W; G" J5 e; J3 r5 Gbody { 9 S+ } G: l/ Z K2 K
font-size: 12px;
! z# M' v* ~. k: J3 M* Qtext-align: center; $ I- r- Z! P3 O; e9 \
margin: 0px;
7 J# N( ?9 N, ypadding: 0px;
- Q. k( k3 [# g" ]}
; t) B3 p4 c9 U8 {/ g#pic{
( r, B3 a# ~2 K& C6 K0 v- x margin:0 auto;
/ c6 P' Q+ a7 G/ t7 z# ] width:800px; + B5 s% [0 o, ~0 r
padding:0;
! X' w1 q7 b0 l4 D border:1px solid #333; ) a/ D" T+ H0 n
}
$ X7 e" a s/ A2 K#pic img{
$ ~5 \! T0 @% Z T2 V max-width:780px; 3 ]) h, A2 `5 W9 w6 e3 v
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ G( b) C+ Y: i! @border:1px dashed #000; 1 n8 a; a: E" y( K$ \
} , s/ T) W# X4 w# B* S: o: n
--> 7 {; H& {& F3 m1 h9 w
</style>
( ?7 W3 K' ~9 `, K</head> ' o+ j! z/ I8 [' r- ~; x
<body> ; m& v3 o/ `0 H. q/ f5 M
<div id="pic">
( [- q+ k2 q! }- `% c9 i5 k<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# v1 f! o2 q$ v2 m$ `</div>
1 F% f% M1 z: H V/ s: `$ o</body>
" a9 E. h7 `* g) c1 {</html> |
|
发表于 2007-12-8 14:55
| 