|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14427
- 金币
- 2499
- 威望
- 1647
- 贡献
- 1447
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' w8 C2 G7 h( f& `4 C* [" ?关键在于：max-width:780px;以及下面那行。' O0 ?1 x: w" h3 L. @ b, ~
固定像素适应:
! [% R+ I: X& x& m$ _% P2 \2 b" Z- @' t* [
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> 以下是引用片段：
4 J6 Q Q! \/ X2 z5 L6 M% E; z<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % O' u7 }- j' p' S+ {
<html xmlns="http://www.w3.org/1999/xhtml";> ( [% g" w; A# K- @! F- D2 X
<head>
6 m6 x) U$ v0 D" C. m<meta http-equiv="Content-Type" c /> 5 m7 v+ f p) j5 O, B; C- J
<title>css2.0 VS ie</title>
a& N+ h* L/ } k$ y& Q3 y; i8 |<style type="text/css"> + _: B( y- V z- [3 o
<!--
/ ]$ p8 q9 V" N: {7 tbody { ~4 S/ y+ M9 ^* z
font-size: 12px;
4 e5 j; i" \6 l8 z E3 ttext-align: center;
& K: `1 q) N2 ]margin: 0px; 4 M4 @( R$ N7 h4 c
padding: 0px;
6 c2 v8 S( W3 {& I# v% V8 E}
1 C4 p3 S' o; d' P#pic{ $ }, }5 a! x* W b* ]
margin:0 auto; 7 t* |' B- d/ P4 x3 B. U9 `9 c
width:800px; $ Y; n6 A3 t/ C8 `, t; e
padding:0; ) o/ J! O: g- }) S3 F1 c% O$ X6 f: a
border:1px solid #333; ( p5 y8 b6 w/ t7 j+ x$ S" q/ }
}
$ f( m, z( w. n8 ^2 x#pic img{
5 i: V, G6 g8 O8 l3 w max-width:780px; & g' i% u! V% Q! @
width:expression(document.body.clientWidth > 780? "780px": "auto" );
5 Y3 o2 \5 [$ Nborder:1px dashed #000;
+ l" x- v4 ?0 T$ a3 {" _} + j, Z7 ]6 b! i/ k" `
-->
5 y: {1 b: z. c) [; W! k3 Z</style>
0 Z. {- S1 R4 M( S' s</head>
& [) _. P& L5 k! T, g: {<body> 8 `* S0 `8 R" U# B" m8 }
<div id="pic"> 9 N+ ?/ m' b! f/ i. x4 p
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& {& J1 l X2 x4 ~- K. w3 {</div> a" o4 l9 j4 ^" N1 f4 E+ ]
</body> + k2 U8 H' J! C2 ^4 O( v0 y% _/ D
</html>
5 w, v0 Y# [$ L
2 G0 O' E0 W) x$ F5 G% G) }% {百分比适应:
( G$ P4 c8 c# n0 T# e' V2 M& q" h' W' I* p5 b以下是引用片段：
; J8 Z G# i q* A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 x$ j* V7 K9 T" @$ z+ h<html xmlns="http://www.w3.org/1999/xhtml";>
4 D$ P ^& X2 U# M5 r8 {' B<head> , n0 A( p4 y! Q3 s. t
<meta http-equiv="Content-Type" c />
5 |; j- \+ Z/ o0 E<title>css2.0 VS ie</title> / h$ Q' d2 d0 J8 N/ O" j- J5 R
<style type="text/css"> 8 W* W+ W* `* E6 |- ?( [
<!--
* Z& G0 Q# t& l5 H/ d4 ibody {
# L% u4 y! ?5 r) qfont-size: 12px; 0 z$ ~0 b/ M1 C
text-align: center; 7 ]' S: i3 w! U+ J3 Z0 q
margin: 0px;
; B% r+ {$ ]+ J6 U) U# }padding: 0px; ' M% T& K' w7 ^( x4 }7 v( c
}
/ p9 H; H# C+ _+ K9 W( c#pic{
1 S# Y& d0 [; o9 I7 c" L/ o) c margin:0 auto;
% f$ \7 P: Q2 U' g7 C7 L6 A width:800px; * x" }: Q& Y8 b1 G" g$ F4 [
padding:0; * P( U' O, O, O) ? ?
border:1px solid #333;
; `0 n. i( j W( _" [; U } ' v O: A& v; \0 o9 l
#pic img{
" T6 B8 I+ n+ x% Y5 f7 e, _& H% U max-width:780px; ?9 C4 L, Q) K
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" A8 A' T6 B& i" J. k/ K Qborder:1px dashed #000; " g4 i! H0 D) a( j8 H* m% i
} / w$ n. ^, k s# y# |
-->
0 Y& ?, l* Z+ m" s/ M</style> + q# g. S: w! D! w( S b
</head> + k3 `, h8 ~. s/ ?, a Y
<body>
9 I4 V8 Q; W6 _" Y5 N: m8 F<div id="pic">
- g7 p: H7 g5 V b. K) S. n# O$ |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; R. U+ C y2 d/ v* n) a5 i
</div> + a- E' t* X6 o; Z) X) U
</body>
- n3 O8 h& ~: _</html> |
|
发表于 2007-12-8 14:55
| 