|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14397
- 金币
- 2484
- 威望
- 1647
- 贡献
- 1432
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ y; F/ c( p6 f+ a0 `( o( E关键在于：max-width:780px;以及下面那行。; B9 p" Y8 q& w: ~3 o
固定像素适应:3 H9 i' G" Q" U9 Y( M$ n$ C# e
1 p' O9 u! x9 _) y* u2 x$ z% `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> 以下是引用片段：
* b1 i0 o0 Y3 m5 D) O% b& ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' f1 d( D; H: Q$ W( L+ k- O<html xmlns="http://www.w3.org/1999/xhtml";> V+ r+ k/ u5 K/ n9 a
<head> ( b7 P3 h9 W) V H( h, u* ^" U% [
<meta http-equiv="Content-Type" c /> - O4 @. p$ o- a/ m, ]1 Y% }
<title>css2.0 VS ie</title>
5 ?+ T2 T4 _) L3 s) v# _/ P<style type="text/css"> 1 n) K8 c3 W6 ]/ I% ^# r
<!-- ) e# n) e7 }: R, }3 E; {
body {
5 r, |% e2 m8 l) ^: G6 tfont-size: 12px;
! H+ b5 O2 X& x( m ?text-align: center;
$ U& V: E2 o" Wmargin: 0px; ' G# X$ K7 b* K5 E
padding: 0px;
& F, {* w$ D$ E: @} ( e) H9 x$ |6 Y1 \0 F
#pic{
- o0 P+ H- v! U$ f6 h1 W1 h0 P6 o margin:0 auto; 5 u' o$ `# x/ w1 w
width:800px;
% V; Z' n7 h. u' p padding:0; 1 p3 ^( M5 ~* A9 H- S
border:1px solid #333; / t8 R6 o/ T% E2 W% y
} ; R9 M6 {9 t; T, x7 A- R
#pic img{
]5 @* n- h$ z0 y1 @& W3 k max-width:780px; : I* m( G5 C7 ^( I- {0 K6 e; [
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" O; m# _1 M4 P! x3 A% Kborder:1px dashed #000;
- C; y+ M' W8 l( R8 O" B/ e9 G- T8 \} 4 B6 P4 J: M, x* ~
--> + f. b1 t1 k/ l' k
</style> / ~0 j+ G) M0 o1 c( [2 `
</head> 0 I! G" [: i4 t7 {/ O
<body> 2 J( A, x/ ~9 |0 W& o8 d) ?' e: m
<div id="pic">
4 H: v' O% B9 y& y$ S, Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 \8 H/ c+ M. |- v
</div> 9 z" v- ? i4 h; G- U1 W
</body> " u# B( r6 \4 y0 X8 X- v Y/ ?; w
</html> . E( E4 B! I6 ~" ^7 H' I
3 W1 Y+ @( v4 Y( y+ B0 C" l1 f百分比适应:( ^7 m# s% Q6 D2 J/ a! q
以下是引用片段：; j6 b3 `. U8 E0 w6 W8 S' E2 F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + h! _' C/ u w- v' ?- a- V3 x! u
<html xmlns="http://www.w3.org/1999/xhtml";>
y4 V3 h: n/ f% x j9 k<head> , L4 s, G) f; f- X1 A: B5 ?
<meta http-equiv="Content-Type" c />
% a1 g% } @) u( S* ~: l<title>css2.0 VS ie</title> . P; e$ R) N* P
<style type="text/css"> ; @( _# q# [. g" Z, i& O
<!--
& t- j! f, c( {/ h, k3 {body {
`: S5 g/ {& `# F' y; ~font-size: 12px;
5 Q, }$ p( c6 [) u$ otext-align: center;
4 c Z! |3 _4 v( l8 ~, i T" C" A3 smargin: 0px; + ]1 q' s) z; Y$ r" F* o
padding: 0px;
2 }9 N6 M2 n& n, k( s3 \ q} * I0 T; H; M, K2 |/ y
#pic{
9 Q2 A+ @6 @) F# e: _: [( D6 D margin:0 auto;
3 V4 D( A" V0 A9 i( D8 a. X width:800px; ; a, r' I% q+ H- N9 u9 L
padding:0;
3 h& J' t8 b- i border:1px solid #333;
- }. ?; }1 G1 b, G+ H& A }
7 q+ P& H2 K+ r! \5 b9 w' ^9 H#pic img{ ; ~+ i0 u: n8 G2 H
max-width:780px;
, s9 L- F3 ^# b' ?$ N* \6 K1 jwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 f. u: e& T0 @# s8 e$ ?border:1px dashed #000; # |3 W6 W9 y8 F+ n7 T
}
( U7 I! ?5 E# v4 A; L-->
. P: v' R8 i$ a; i</style>
; k& v) o& w- _6 V</head> - R0 h7 O9 ]0 a; s( w8 J
<body>
; T3 K# m: {$ r) x. s/ a<div id="pic">
9 j( o* S4 w1 s' A<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - U* U7 b8 |; l$ p9 Y, E/ Q/ x
</div>
! r- N9 W4 N( ]6 x</body>
' t* z0 @& |9 ~% ~</html> |
|
发表于 2007-12-8 14:55
| 