|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。2 {: k8 I. X2 }- j( w
关键在于：max-width:780px;以及下面那行。
/ G6 h1 |) S% V! H- o3 l" E% j固定像素适应:
8 Z; q" q' Y0 H+ v8 H" [1 G( W' Q( u4 r1 s$ ]# i
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> 以下是引用片段：* z; H' `/ A ^" ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 f; K* x. m4 B6 S; t
<html xmlns="http://www.w3.org/1999/xhtml";>
. X* r% n& _' G<head> 6 t; \; b5 V+ B
<meta http-equiv="Content-Type" c /> 6 Q4 |( M- k x/ x8 f
<title>css2.0 VS ie</title>
9 V' M0 {6 N( W1 D$ D# y8 ~<style type="text/css">
8 f$ E0 j% E1 X; Z<!--
5 c. n r4 ~5 j+ bbody {
# _: s9 Y4 E& A) L# n. c5 Efont-size: 12px; : Z5 S& d" `/ I* E% u
text-align: center;
. p/ b+ u4 D3 p: \: P) e! z5 i5 Xmargin: 0px;
: T( I$ Y8 j: K @& ~padding: 0px;
8 g/ `" h k9 L, C$ n0 z}
- G' }" i$ A2 U( K1 E9 ^& p" r#pic{
1 i* G* x) r; C7 ~ margin:0 auto; ' K! L1 q0 F" W0 q3 i
width:800px; " U% s( n# L% d1 p3 ^8 i
padding:0; 0 H: a' I/ V4 L% h* P
border:1px solid #333;
2 J6 x% R+ k n# s6 Q1 t } 9 t# |7 Q2 A6 H$ z
#pic img{
0 ?$ t. e3 x" D+ o7 }$ {3 O max-width:780px;
' W' ^7 V% Y$ r$ T5 K1 G0 y+ `: Zwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ( o0 ?' C. C% C- m q
border:1px dashed #000; & X* D( A9 {+ C1 f* @5 n: i1 K
}
7 Z# d7 L; M& ^9 M* H: L6 \-->
2 {& x+ X* H. l% ]; L1 M- }</style>
2 i# y4 G$ [+ s( y/ H</head>
. r* |3 g" i. P. w, W5 C<body> ( o# r: A8 G+ g2 h0 z& h
<div id="pic">
* C0 @* }- V0 @+ p<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: q' a- v Z: K( Y; Y</div> & G6 K; S+ ?. ^0 |) x
</body> , x0 B4 G# m, X/ V o2 L
</html> / a; H5 @$ T: A+ A8 N" p. R
: B9 {! m* b* f3 G0 g4 Z9 Z9 w百分比适应:9 z1 ~. M+ a3 _6 c
以下是引用片段：
' `1 g7 i( P% b2 I- z5 E3 l<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> & i1 B7 v9 o& d* H' s
<html xmlns="http://www.w3.org/1999/xhtml";>
$ t" D: T5 \7 m) F& m<head>
5 W$ i3 q: T; E3 _% H3 T<meta http-equiv="Content-Type" c /> 8 g+ D+ r H) b" q! z5 c
<title>css2.0 VS ie</title>
& h5 u) F: X5 i/ J+ c<style type="text/css">
; V P7 b: ]5 A+ x<!--
0 t5 d, r5 a* F7 {# Fbody {
) d; [) F% f8 f6 nfont-size: 12px;
) D2 n/ G" S# q+ p! k: j1 ]9 W) ktext-align: center;
7 ] {2 B0 p+ s- d0 ]: Fmargin: 0px;
' d; A2 p- P# Y- n! N# Zpadding: 0px; 5 l x V# E- _1 c, H. V6 ]$ I
} ! _9 ? j- O3 {% i/ X/ h
#pic{
+ u& T% t9 j) d$ k3 e2 y margin:0 auto; I4 l4 N+ N0 t
width:800px;
) s( V& K1 x7 v e padding:0; p; X$ r9 F' J' |# L
border:1px solid #333;
2 Z! \ U; U& I" ]& x }
- U) P0 \2 T" ^ e+ w. }% x4 w) m2 A#pic img{ 0 i4 n$ n6 P- }! O+ I2 n) F
max-width:780px; 3 l k6 b4 R( o# N, `( F& n0 H% X
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, @+ j1 Z; L2 H0 T6 a5 tborder:1px dashed #000;
+ H3 E$ i9 F! q& n9 Y/ M4 g}
' q# [# G9 P6 D) n' \& C! N9 O-->
" N, U+ g( v( E# h</style>
8 K" [- {# J0 z+ I7 o( R</head>
j. X7 _* D0 g: L, F; L<body>
& S* K0 B. @5 c<div id="pic"> 4 |9 ~1 } s2 H
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' x' q7 o* o% A9 _. S</div> : f# A5 ?- d% }9 K
</body> # M* h7 {* A- m( U
</html> |
|
发表于 2007-12-8 14:55
| 