|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。, m0 {7 i1 h) H+ a2 b& b- N
关键在于：max-width:780px;以及下面那行。6 S: I5 p8 O& E$ \! h n$ o
固定像素适应: j8 N! [( [- D( K+ E; S3 @: x1 J
: o& S9 K$ S% @; M8 Z9 edotted; 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> 以下是引用片段：8 Z& E8 N, l$ _; Z" p4 ?: b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 ^; g; x6 x9 z<html xmlns="http://www.w3.org/1999/xhtml";>
: j( v6 b A! i2 V5 k4 c4 v7 b<head> ; [: }( u/ W0 d8 z D; b- {; g7 n( |
<meta http-equiv="Content-Type" c /> 6 L$ G. r( m' y/ T
<title>css2.0 VS ie</title>
# j* _' V/ z' m k$ r6 W<style type="text/css">
1 x2 x3 O0 a1 A' ~. W3 s0 N3 n<!--
9 X* c0 d+ f% l$ Hbody { 9 }5 k: g% l4 ]! l* q' h- l+ h
font-size: 12px; 9 V) V1 E5 p9 [1 g) h
text-align: center; : z; f' Z7 @* N* P3 A
margin: 0px; 0 J: z1 m, Y& M
padding: 0px;
+ P$ Y. g3 Q v U8 J7 w1 o$ U} & C+ N0 C7 {; @& F
#pic{
6 }) S7 q6 U" q' w margin:0 auto; * d' @+ Z0 D9 r4 ~* x
width:800px;
# A7 Y, b: v( ~5 S padding:0; # E5 D8 g/ |, n
border:1px solid #333;
& b! A4 R! ~( g+ O, I) {7 B }
/ {8 Y9 V2 p( L0 u0 x' x" J0 x#pic img{
" q7 R( W8 e" Y5 U/ |* | max-width:780px; 0 A. d5 W1 {6 b! @1 r
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 0 I+ X( v' A/ _8 V, ? i7 [6 R
border:1px dashed #000; P' ?& r( s9 C+ `* Z1 f
} * v T e3 Z$ ]' O% R
--> % w. b% p/ }; i. }. N
</style> : H6 O# v, k i& _
</head>
% W" g3 u7 ^" v$ r6 L8 H7 y, w<body> ) q) T, O" B0 E q4 R* E0 T
<div id="pic">
# k4 y ~4 D3 e+ O8 i<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 h. ~8 [4 |- I0 ?$ s</div> , P1 d3 m4 I3 u* F
</body> 7 t0 u2 i1 q; a' V. [: p
</html> # O. E- Q$ i: K9 c
, X, e/ d8 s; ]9 F. l Y百分比适应:
, ~, t0 l% v5 O/ A以下是引用片段：
4 |' ?# d a- `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) k5 `, m, D: O7 {2 |
<html xmlns="http://www.w3.org/1999/xhtml";>
2 [- q+ t* v2 e<head> % I9 p; d+ |5 q! F
<meta http-equiv="Content-Type" c /> & n. C& p* d0 w0 \+ o. C
<title>css2.0 VS ie</title> % j4 o5 p) [5 W0 m
<style type="text/css">
1 ~0 m" U- d, U- t2 h" [% y<!--
# h. ]: m ]4 ]" M) ]% y$ i/ @/ fbody { ( X! W6 c$ G( x
font-size: 12px; 2 Z! {6 z3 m9 w
text-align: center;
' p" L6 u. ^5 m- Z* P: I. j* Ymargin: 0px; 3 w) E6 v2 j4 W0 a% P
padding: 0px;
5 o# C3 B( ^2 r. |% t( V$ w: Z} % @( W0 a6 B+ ?
#pic{
B+ _, p' |4 t! m6 }3 g margin:0 auto; 1 x6 Y( t, W8 `( O
width:800px;
% ?4 A! W2 m9 ~( w6 I* K2 X& j padding:0;
. {) |5 T3 }9 ] border:1px solid #333;
% M9 u. R+ @) T0 w M }
9 g* p6 d1 y! R/ P! j; V# B6 r; k0 }#pic img{ $ d9 P! C6 J$ A4 I. H9 w6 a8 O
max-width:780px;
; A+ O3 M( J/ E5 d8 Bwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 N/ ^9 b# [8 L0 M' Q3 x+ }
border:1px dashed #000;
L) {$ C5 f; m/ }5 c' A! Q, \3 M} 4 c0 [- B7 ]! A/ K8 V
-->
! V9 k6 k' |7 E {6 Y5 a, A5 w</style> 0 v/ a+ @' \1 F+ G' p1 i
</head>
% u0 t2 E: M# c8 _/ V5 [<body>
2 _8 R& d5 Q- J D<div id="pic">
, S+ [7 p# `# O3 B! X7 f z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 L/ o9 i2 C1 Z4 b1 W( ~: Q</div> 2 ~2 _ r" a/ P, e/ M7 U
</body> ( q0 C2 A7 x$ ]; D! X7 g6 T {3 j
</html> |
|
发表于 2007-12-8 14:55
| 