|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。# J+ @; e7 S; ?9 W$ V2 e8 s
关键在于：max-width:780px;以及下面那行。( m& f+ K$ g7 D6 T) j7 _7 A9 S) [
固定像素适应:
# c1 _) G0 Q+ e- y/ k' C7 g+ }* o
) F' W, A3 q& }" g. @$ g5 F% |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> 以下是引用片段：
- { F" Y, z% K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 ~2 X/ B8 ?3 e<html xmlns="http://www.w3.org/1999/xhtml";>
& {. y# [. j; i' A3 A# x<head>
2 W' I8 \1 x( b3 U# ]<meta http-equiv="Content-Type" c /> * S# V% L, k1 B" V, ?% b" X
<title>css2.0 VS ie</title> 3 ?2 @- O. ^9 F [
<style type="text/css"> & h7 L. a: d" g* M7 |0 ]4 p. t% @
<!-- 2 M* ^; G# V/ f1 q* E( c j( P
body { 4 A/ s, G9 c; [& v
font-size: 12px;
: G8 ?3 y8 N) q0 S- [text-align: center;
% {2 [1 n( j6 p8 W Emargin: 0px; " O3 M. p8 W% H2 W- \6 f
padding: 0px; 2 e0 }+ t: [' p1 a
} # r x* S! F) o6 g
#pic{ * j4 i# T6 E. M0 L; _3 F) R
margin:0 auto;
1 V1 s+ P3 B7 I N/ W( O width:800px;
! a# l- P3 s: }# I/ F1 x padding:0; 0 S0 `6 q' t6 \* n4 }3 v* i. W
border:1px solid #333; . ^% N6 k1 [6 f6 n0 w% D
} 8 y: a( T5 C' D' p
#pic img{ " s$ N, F' t& {8 d: l# \' o, O/ v+ b
max-width:780px;
& ? Y$ B- h4 ^) [8 {width:expression(document.body.clientWidth > 780? "780px": "auto" ); " e' H4 _9 B- f1 r. y9 n
border:1px dashed #000;
. U+ t V P' D" Z% G. ^7 e V% ^3 N}
- K. Z9 ` `. t( I3 X, c--> % {* Y# r7 P4 n; E
</style> + a; b$ v& v" ?7 G8 T
</head> 9 U! V$ U* @8 i# }
<body> $ X; Y) G6 t. U* X0 V& z
<div id="pic"> ! u6 ~- z# q" H
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" |4 I: W" }+ A" r</div>
4 n* c. c$ D8 P% T( n+ Y: c2 A</body>
, ]5 ^+ c5 ~! L9 ]1 ]$ D4 N</html> ) V- T, V, @) d1 x( X! i4 ~
( s( @2 U" D% k5 W百分比适应:9 W9 z* Z( x* \9 e6 J% ^) T
以下是引用片段：" J( Q+ g5 K5 ?) c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . q; _4 K, U R$ r+ R% v
<html xmlns="http://www.w3.org/1999/xhtml";> , i8 }: v' H- H0 S. j6 H2 y
<head>
1 w% n/ @! A# y<meta http-equiv="Content-Type" c />
# C5 \/ {. ^5 y x+ h, x<title>css2.0 VS ie</title> ' ?7 y, }0 g4 |% r- Q a: @8 K
<style type="text/css"> " v! t' |6 N/ q' X _
<!-- / `9 |7 x- [" M
body { ) d/ S- m& R) n* o& ~5 A. P" C. B/ i8 t
font-size: 12px;
/ u+ ^5 G+ B+ O" f! u6 Jtext-align: center;
; f' |1 f5 e8 n5 W0 e( jmargin: 0px;
) ]& d: P* n0 epadding: 0px; " E+ L% A7 ^, {* I) W0 c
}
( ^1 P; |* c' T8 r#pic{ ) t) E; U( g; g
margin:0 auto;
" K q( J+ d6 J+ L0 D; N width:800px;
! H( i5 z, o& v padding:0;
/ s, N% l% f0 J* E2 d border:1px solid #333;
6 {- b$ K- P% D! }0 y G6 } }
5 @' o' h1 G* ?$ [2 x#pic img{ ( o$ v. `: ]+ B' P5 r
max-width:780px;
/ Q# K1 p* Y3 F3 e6 h" t& \# e. Ywidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 {$ P0 ]+ T9 `1 X! {border:1px dashed #000;
2 f- d$ ~# o; P* L9 b3 X- ?* ^}
8 K2 M+ X6 w2 ?' J5 [-->
: W. t- o5 \! ?6 {3 V</style> 7 s/ l, x* z, A) {; |* Y
</head> . ~, \" G* u' j0 @4 A
<body> / W' R& I7 `4 c2 t2 G2 O
<div id="pic">
4 [. ?7 k+ e/ d/ i7 C! A<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> p! j. W$ H/ Q
</div>
7 ^% Q e& E, O</body>
5 e* ^3 Y' [# b/ B; G- _: B G0 T</html> |
|
发表于 2007-12-8 14:55
| 