|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14391
- 金币
- 2481
- 威望
- 1647
- 贡献
- 1429
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) h4 A' E$ C+ K+ E7 `: E关键在于：max-width:780px;以及下面那行。) E! _1 U/ V6 c0 ^) |7 k- z* q
固定像素适应:
2 {) \' [+ c A9 B: U& J: k1 l' _2 f. m* ^9 W; I* {; K
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> 以下是引用片段：
+ N6 W# l% J! L: U<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 L1 C2 d: |0 X/ N) k7 H<html xmlns="http://www.w3.org/1999/xhtml";> $ }- X* \3 ] q8 X+ s. `- {
<head> : J& v. b, A- M# L
<meta http-equiv="Content-Type" c />
$ K6 Q: Q$ n( L2 l9 _4 J<title>css2.0 VS ie</title> & P1 B( L6 c1 {$ W& Z4 B5 z
<style type="text/css">
" [; |, e$ C# s/ ]; I1 D8 R<!--
/ S9 z4 G! x* r5 N2 cbody { - }) z) N" }+ Y8 i
font-size: 12px; ! X' J4 G) c0 x; ]
text-align: center;
' T1 m: R3 S; k- p' emargin: 0px; ! \: p B7 f$ L, x8 C
padding: 0px; / A8 o k7 S1 e/ K4 F5 S M" b
}
) E! M$ m+ u/ _* z+ t#pic{
6 k: ^" Y1 K- l; h4 t margin:0 auto; 2 p% k7 U# U3 T* P- f% d
width:800px;
3 d3 Y; t3 a0 |7 T+ Q4 _% _7 _1 Q padding:0; ' h0 x0 B; }# e& p% z5 f- I
border:1px solid #333; 3 S9 E) W. v- W/ f/ }' H
}
% `* @) S4 w/ w, P1 W$ b: z#pic img{ ; S+ O* W# T3 c% E ^7 ?' I# X
max-width:780px;
' Z9 s! }+ @) y% @0 W1 b) T+ Q/ [width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 r$ O) M8 P+ E5 T( \- t
border:1px dashed #000; - ^# p' `; W; V0 {4 h: {
} 5 c* v0 i* |+ W9 P: |) v
--> 3 N: j9 Y; i' V! u
</style>
" y6 {$ \" E8 F/ |/ c</head> ; Y( `4 t" g2 {, Q
<body>
/ j% ~8 z" Q3 Q<div id="pic">
/ A# l+ m5 k" b+ @, M# J0 d8 d% e<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 k# k* X2 z. s% d* |; E5 `5 I</div>
7 t# J+ g# f; y* l+ f" L</body> % K1 \7 T% M, T& E* M: k
</html>
' [/ n% Z U0 y$ S4 b T! m( V
Z/ l9 A" P. I) E7 {百分比适应:
6 D9 ~6 w" Y0 o9 V: |; d# w9 i以下是引用片段：
# {; a x: ?( w3 p" G& v* s' q2 V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ V/ |9 Y) q" p' u- ?0 _5 ^9 H<html xmlns="http://www.w3.org/1999/xhtml";> ; F+ S# r' Y7 s7 s6 l
<head>
/ S9 h/ E, l9 F1 b+ ~7 |% F, O9 L<meta http-equiv="Content-Type" c />
. x3 P; e& R8 B; l" H4 X8 w<title>css2.0 VS ie</title>
$ c" E* y7 w4 G6 R$ c2 V& X<style type="text/css">
' s0 P" O, z8 N r6 E<!--
/ T) i" {4 Z" ?9 B6 i% K: K. Bbody {
. T5 |2 g5 [$ U0 O4 L8 Kfont-size: 12px;
: b2 V2 b( b B9 Ttext-align: center;
4 P3 b5 u0 _) [( bmargin: 0px; / e. C& b6 } Q: r' t0 k; i; V" X
padding: 0px; ' N4 K' o% d) X) N1 ~! `# ~* k
} + w/ ^1 S. ]8 T) _, t7 E
#pic{
$ P a/ ^3 v( p6 E- S# D margin:0 auto; # m; H0 a l" W o( C8 f. B& |2 S
width:800px;
9 c( z" h. R& ]6 P9 ^( ] padding:0; ! X0 H$ D( {# R! b5 x7 ]% B& ^
border:1px solid #333;
# N% n* r, h6 A# n* ? }
% F4 A4 `; F" t#pic img{ . x( x8 f. k1 ^% [! d
max-width:780px;
0 E; ]# x: Q& L7 c+ |5 |width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# e1 @% ], [' [: mborder:1px dashed #000; 0 l/ o+ s3 \! H5 g @
} ( B$ r- H. W& t {4 Q7 B
-->
* Q8 @( T; T7 S+ Y3 K2 F0 @$ o# w0 o</style> $ T a) v0 }" }" h' ~# }
</head>
/ s8 ^5 \, k% z5 n/ ` X<body>
# R M( ~# C4 z9 h( r<div id="pic"> 7 f: i+ ?% \2 X: F6 P) k' T
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , F: d, y K6 I6 ~3 u+ A6 s# }
</div>
+ L8 n6 g: E; o2 M( g' a</body>
) ]7 i' O8 ^) g, r$ u3 t7 e</html> |
|
发表于 2007-12-8 14:55
| 