|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14333
- 金币
- 2452
- 威望
- 1647
- 贡献
- 1400
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 k% M3 `) }" F! ]1 U2 \4 a关键在于：max-width:780px;以及下面那行。- I) j8 K1 x) `2 {+ k/ k
固定像素适应:
2 ^$ t* H8 J' b3 l4 K
. j* q. g/ m2 Z6 @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> 以下是引用片段：- }0 a+ n" L+ W* z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ H7 E" a# [8 U, O<html xmlns="http://www.w3.org/1999/xhtml";>
& a: M. e5 U. h* b# e( V' m+ O<head> 4 O, K- U* v$ {, Y% u! y+ q
<meta http-equiv="Content-Type" c />
' R. p8 U- O- `! ^! ^1 r<title>css2.0 VS ie</title> 5 a$ P4 `6 ]* u
<style type="text/css">
3 A" E a3 T7 s- ~& V8 @ u<!--
; d V; O, J( Bbody { - o* n) P; e6 z) Q- v8 S F" H
font-size: 12px;
) e0 ^6 K; V7 Z# t6 t3 f- ^7 Ytext-align: center;
5 [3 F' `# l2 ~( Umargin: 0px; ' c! K$ a% H! ^; Y, g- N3 Y0 w
padding: 0px; 0 u W7 }# }( m ?2 Q# S
}
$ y2 L7 J5 V0 g6 s2 p2 g#pic{ 4 T3 t/ V8 b+ _6 g$ z
margin:0 auto; 1 E. m! k1 e& r" \
width:800px;
+ A& X5 l* p; W6 ?+ C2 T' R padding:0; & @1 J6 b& T9 _4 \7 h
border:1px solid #333;
3 o3 Y0 }) O: B5 M: J }
4 q V+ G7 H! i; w#pic img{ % z5 j( q; D: V% Z. v0 z. }* t
max-width:780px; ) `+ T5 m6 l7 W# l
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 M j$ C& n! H2 j6 t" p
border:1px dashed #000; ! a5 {4 {, ]& ?+ `! p6 @
}
* I% |6 x! q4 M2 G6 _/ k, C _; Q--> : b# T) z+ D# B" _+ S8 d
</style> & T) a, x8 h; i! q' j8 d, t- E; ^
</head> 0 f5 [7 K0 R, S$ V# X/ D
<body> : B+ ~2 ~# W, ?. x/ e. `! L5 [; z# y
<div id="pic">
7 K4 D! F/ m0 Q; J- I8 S<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , h" M0 ]8 m2 w4 `5 i+ ~
</div> 9 P2 ~5 j. V! A
</body> 2 F2 Z9 c! p+ J4 T" R* E
</html> : ?& y7 F" W9 J2 s( S
$ x1 R5 W0 o) G百分比适应:
) [2 L ?$ _, I, V! z以下是引用片段：9 K' h# Z% Q4 ], L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * C; x; n& S0 c7 P: P0 h) X
<html xmlns="http://www.w3.org/1999/xhtml";> 9 s- x. B" W% p1 ]8 J# _/ b
<head> 5 \( [$ R0 _$ d$ `" e
<meta http-equiv="Content-Type" c /> 8 C; f* P' |- E# S2 p
<title>css2.0 VS ie</title>
0 }8 r q @3 u<style type="text/css">
% M. h0 l/ X7 v' R; s' l6 I6 t3 k9 z<!--
# b' r: a! U8 d' _2 c9 abody { % C) e( L1 k% v; B' j# z' E
font-size: 12px;
3 ~ b) U6 c# B8 B5 Itext-align: center;
, Z4 d$ N' P ?/ Xmargin: 0px;
6 o# j# G) }; b: X$ K0 I+ y0 jpadding: 0px; + O- v/ f) X. h" P8 k
}
& a. d4 ~; l3 s$ G& `. Q* V#pic{
" _2 w {5 S" n& c' N. P margin:0 auto;
; I Y' a( E1 r width:800px; ! j& H9 d! |" ~1 J% w& r
padding:0;
C3 h7 z0 t f! O/ q a4 K, V: ^: `: x border:1px solid #333;
* _4 B( X. M7 G Q } ' d7 o% M- G( d- U( ]& c8 q
#pic img{ ) a6 b8 M- j# \; _+ q9 K/ Y. `( o
max-width:780px;
\: o8 Z' z8 K( c- P1 k" c; iwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 O2 j+ t3 M, sborder:1px dashed #000; " U& s- n9 y; _2 d
} # m* J+ ^5 c( x8 P8 n8 E* `
-->
6 j0 [- o6 y8 E5 b+ j</style>
' ^. D$ G% H& @8 u) g+ n</head> 2 o) @0 J& t% T' m. B
<body> & Y# ~5 W9 r+ p% e$ V4 |' l6 V
<div id="pic"> 9 m2 N5 X8 m0 E8 e7 Z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # P9 K/ u8 d r# P! O
</div> # A0 k" \5 s1 ~ U+ f
</body> * ?7 c' ]# Z9 X3 R' x
</html> |
|
发表于 2007-12-8 14:55
| 