|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14347
- 金币
- 2459
- 威望
- 1647
- 贡献
- 1407
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 r! {2 J; c' b3 n. C关键在于：max-width:780px;以及下面那行。3 D. f0 L" c- _) @/ }3 v8 H3 v
固定像素适应:' D! S! I( u+ L
7 s- c, `. X6 b) H) h
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> 以下是引用片段：6 p9 t. _! |' I8 T# |* x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) i* m. p" J* Y, L% d<html xmlns="http://www.w3.org/1999/xhtml";>
0 P$ t. j5 X. `5 O+ {<head> + V: K, x, q3 R/ A O/ U
<meta http-equiv="Content-Type" c /> 1 O4 N* P, k* v8 C. G! m
<title>css2.0 VS ie</title> 3 M9 k7 l: I( G @+ L4 H4 c
<style type="text/css"> 1 f5 ?8 ?8 h; ?& o, Q
<!-- , F4 u- w5 e2 r ~9 l4 T
body {
6 z. n; c/ }$ f9 mfont-size: 12px; 6 _) p! t! S' a( K( G- Y* V
text-align: center; 6 y& n, T" P) L
margin: 0px; 1 [1 L: T) {7 J X5 @" G
padding: 0px;
" I9 t+ l8 U6 C0 A* ~} . u0 R# m) n" J
#pic{ . l; U9 ?/ `2 y3 D$ x
margin:0 auto; 4 A: Q2 \$ L0 |
width:800px;
) V4 N- q* ]5 H6 p: G4 p& V4 O padding:0; 1 u/ J" t/ W- ?
border:1px solid #333;
- P; b9 c" g% k% M; U' m j% k } 7 j" [0 k! k" d- @/ l+ w2 D+ N
#pic img{ . L$ I6 L f" t `: s4 [ f
max-width:780px; 5 t! `4 t+ w9 b& Q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
4 F; A7 M" ?& f6 Mborder:1px dashed #000;
* v- a5 R ~8 C: f3 p: m9 y} ; u9 F+ Y5 u. g' O; E s6 k5 H
--> & Q7 {9 a+ w! H' R- z* u. \, l* m+ o
</style> / O l6 G" G5 g6 X9 N
</head>
' x0 s3 _' [+ C8 L. j' H' z0 a<body> 9 P/ m- H8 ?7 T9 k3 \1 \8 D- L
<div id="pic"> 7 h4 }9 [! g. a4 v3 G2 J
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . K2 e8 z6 e4 q! S
</div>
# ]7 x% {1 ?0 I7 }' k</body> : V- P# l$ Z8 [# l& @5 J& }1 k
</html> ; E& A9 ?+ u4 ^- }$ W3 C
9 G5 L: d* e4 q3 a- ]% X& S0 @2 |
百分比适应:, f- H3 H! |* A% u8 R
以下是引用片段：! m' U L U6 Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& Z5 G5 {$ Z# \6 D<html xmlns="http://www.w3.org/1999/xhtml";>
! a. j% ^2 M" m<head>
& Y# m5 k5 X, @& O3 E3 E1 }8 K, h<meta http-equiv="Content-Type" c />
6 ]4 ?( p$ @; i9 v& T2 @<title>css2.0 VS ie</title> 3 }* u, D0 Y% C0 |
<style type="text/css"> : [" U$ B2 @4 `
<!--
: _' \* v# X. ^: ]* k2 t; K; nbody {
" ?" C2 X5 p( b( n& dfont-size: 12px;
# }/ p$ s0 r+ K J& a: R+ M, n6 Ltext-align: center; ; y' \4 {; V) ]' n- ]. y9 y8 a
margin: 0px; , y. V5 q3 d5 l. G% V
padding: 0px;
) R3 U! |4 S5 Q$ R9 ~! c+ H}
3 n% {; m/ S+ Q# y6 |#pic{ ) [4 T/ u, v4 o) h
margin:0 auto;
3 g$ n# h) z: [3 [. d width:800px; 9 d1 ]+ L% I9 m" D! J0 A0 K
padding:0; * \0 b4 f- f* |% ^& ^8 @# _
border:1px solid #333; 1 |- Y V) ]: k2 ] \7 X
} " a5 t. j X t- f8 G; ^
#pic img{ . @: K+ d' ~$ f* C$ S' f
max-width:780px;
9 o# ^, ? g4 J2 F% d5 |" h) Wwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ ]3 ?! c9 ^: S6 a3 jborder:1px dashed #000; 9 `3 I$ O( a9 W. q" [
}
6 w. _5 C9 z) f7 ]* b- {$ F$ h--> ; q4 n8 ]6 n: A0 z
</style>
5 M1 `' h+ P% v0 M( w6 r- V- X0 r</head>
- {0 k2 a4 _& q! y1 b; \<body> / ?+ Q, c5 x% J6 ~, t. U- c" b
<div id="pic"> ' r" [* q3 }$ X$ U; R' {. k
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % A c6 G F$ A k- O: |, z
</div>
, {9 p2 {8 x/ k& K$ F6 e</body> 5 x. |: s" k# U, W% r/ H
</html> |
|
发表于 2007-12-8 14:55
| 