|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。; z% T" f! v5 H, t
关键在于：max-width:780px;以及下面那行。8 U# o4 o& G5 R+ b/ U; L" B
固定像素适应:
, `- [: m" O5 X# [+ }) x' u% R5 o; N: ^2 Y
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> 以下是引用片段：* P* }7 w7 u& F2 i+ n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, a* }" j) W% t8 U<html xmlns="http://www.w3.org/1999/xhtml";>
8 p" r" R; e6 T<head> 7 E0 N% s2 i4 i$ V( m7 |+ s
<meta http-equiv="Content-Type" c />
" x3 X1 g. h/ c0 L3 q$ j. J<title>css2.0 VS ie</title> 6 g) [ U2 E! K5 ]1 |
<style type="text/css"> & ?: l/ V2 N: k0 x/ ~
<!-- 6 C4 t$ o( |3 D8 m
body {
! r/ y5 W" t# W$ K+ G) Rfont-size: 12px; 9 Y) ]1 b1 b1 e0 p/ } \3 K# }" C
text-align: center;
6 @( F0 N8 ]: f& C5 G6 z' bmargin: 0px; . g0 ? U# x) V+ f( _3 p: ]) v1 Y# {
padding: 0px; ! Y5 Y3 S) f' d
} ' i$ p: _6 S+ L* V- h% V' u
#pic{ r6 ?$ Y/ s! y1 g' J
margin:0 auto;
! x% R0 ]3 l# h4 P# z width:800px; 0 V) J9 p5 ]9 C/ o! U5 H, l' C
padding:0;
. ?# h4 O1 X9 u! @ border:1px solid #333;
5 j3 o; G! R1 O } 3 B8 e0 z7 X4 t' p/ M
#pic img{
8 r7 V$ Y, |) Z4 v* t/ W! ?4 J0 c max-width:780px;
" X" T& N+ l5 Lwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
$ f2 t+ @* j; ~& ~$ b: G6 a, vborder:1px dashed #000;
# i4 u7 \7 S: F: K& b( Q3 @} + e% U. K9 A8 o
--> 2 c; L5 W/ s; @* s5 q, w% T0 ^
</style>
6 A0 G7 u" @1 ~9 I! v x8 o; D5 d</head> 5 u& O0 {/ f! u
<body>
! u8 E7 o. T, y$ i4 u5 h<div id="pic">
% H- Z6 L3 D( v% ]; y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 R8 v$ }5 A: U( O; \; o</div> 7 I9 K' m; R" a) f* _ Y
</body> / L2 x. C% p( X0 w: A! Y+ d
</html>
/ ?! m, K" j' {7 u8 F2 }5 [( ^% l5 ]1 `) a
百分比适应:. C' J# L, Q8 e8 { @2 e
以下是引用片段：3 t- r% m& t2 @% x0 v; l) b- m" x7 g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # Y/ ^, P/ ?0 `# V
<html xmlns="http://www.w3.org/1999/xhtml";> : b* p0 w/ ]$ D
<head>
7 a6 d, m. c7 e, ]( X; m* X8 C% D<meta http-equiv="Content-Type" c /> : S& `/ s% d& L7 r& Q2 ~
<title>css2.0 VS ie</title> ( f3 ~" r( M8 L. j( V
<style type="text/css">
7 O$ C9 P7 |1 m& J8 R3 G+ [1 [<!--
; i* D4 f( W# y# b3 D3 obody {
: d& M. l3 ^0 f, ~, Q/ Yfont-size: 12px;
+ M. q, R4 p$ O J6 ctext-align: center;
& M& l0 [# [0 T: A- z R$ C7 Omargin: 0px;
5 ?7 p# p7 ]. O' A4 Upadding: 0px;
; z: a6 a9 |% r) _, B8 B) g} & H: k8 n8 j- \" X0 h6 e
#pic{
+ U+ h h/ Q' m8 i4 E q0 e5 i margin:0 auto; % N9 K" i$ d. j. X9 x$ b6 `8 M
width:800px; 5 p t: P) X6 s
padding:0;
3 s) @# }4 D1 w( ? border:1px solid #333; . }; z. e! J ~( s& D
} 2 j2 N4 n( Y, n' b: N
#pic img{
+ a* z! I+ n4 j9 o) U max-width:780px;
+ x+ D% C$ }( |! ^8 mwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
! `( [1 s) J. p, i& | M0 Sborder:1px dashed #000;
# w6 h5 D# d4 w$ O9 G) T} 0 B8 H4 }% }, d1 D& ]
--> + J( V9 i6 V# x W, _+ ~
</style> c/ k2 k1 {; q4 e8 u# {' f$ ^
</head> , _# h3 v8 i! p: b: E: V
<body> * g, c& s& Z; |; s% z& l( |
<div id="pic"> ; G- ]; Q2 }( l; j& l
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % j2 x, @4 R& d9 J: }# a
</div>
* P0 j4 e9 ~( {! j+ X2 ?</body> - D+ d. n3 Q& [8 g5 T
</html> |
|
发表于 2007-12-8 14:55
| 