|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14423
- 金币
- 2497
- 威望
- 1647
- 贡献
- 1445
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ V+ G; C$ r" U: ~关键在于：max-width:780px;以及下面那行。4 j7 o' r( @/ ^ G
固定像素适应:: G) w& Z% V( \) v3 d9 Q, d
' o' _4 ?! k1 }9 g: h- Idotted; 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> 以下是引用片段：
% V) v7 O. n0 G" h6 g/ g# p! }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% z6 K/ k$ \6 A* K0 F9 ~<html xmlns="http://www.w3.org/1999/xhtml";>
1 O% f8 p! _& K+ L2 K4 }1 l. N& j<head>
8 E! ]' Z- }3 V+ q" @" d- p: D6 h<meta http-equiv="Content-Type" c />
$ [2 @8 `2 w' U& v5 Q6 h<title>css2.0 VS ie</title>
0 ?0 @) z3 J: t( U( Q<style type="text/css">
' F5 r5 A( ~( P1 l7 w& T<!--
% v4 J5 U4 s1 u4 a' vbody { 1 N3 G' j) u0 y- R. f/ [( {
font-size: 12px; : e# d% M% Q! f7 `8 x
text-align: center; 3 v4 Y- L [/ M! q! O1 T
margin: 0px; / T, l: @ c2 @7 P( ], O( n ]
padding: 0px; ! c q4 w. K# D0 s' E
} ( @' }, D3 z3 A: C1 y% H" Q: o1 O
#pic{
; M' e+ \: G4 N; i$ n margin:0 auto; 3 V: X$ B0 l9 [- R% Y! p: r
width:800px; + g5 y; O4 x" u1 ^
padding:0;
- Z4 Z/ m! U! M4 J' Z9 f1 A8 ~0 C border:1px solid #333; , o5 j& k, ]. d# ^
} * M. g) E' J& q6 M- g
#pic img{ # B3 R5 a( x. \9 _3 x( ^: T8 s0 M, G
max-width:780px; q" B. h* }: v8 f B9 n1 G
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ' I; X3 [" A$ e9 l2 A9 F. O# Z( v9 E
border:1px dashed #000;
3 ?3 @: k6 Y2 {9 `: Z. A}
0 t5 U7 \1 g* v: g! [-->
. M3 u- P4 S% w</style>
; l8 v3 }. S, T- o$ C# O8 P4 l</head>
! j, b9 b6 P; ~# |- N<body>
3 {4 ^5 h7 K5 Z<div id="pic"> 6 b" [: {. o7 D) i+ ]. Z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 |4 r# H5 k$ F' R$ H7 p</div>
# V. V: N. }" G: F0 X</body> , m! r# E$ r; p2 P y' h+ [
</html>
% O% e& _ B8 q& Y" q
. K2 v; D7 U. P1 q百分比适应:) {: X- G/ h* f( d
以下是引用片段：
) ~/ i/ h6 j1 b( x I: @<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, I/ l6 M3 [" Z+ a: j<html xmlns="http://www.w3.org/1999/xhtml";> ) Y5 H/ _; u1 y- w' G
<head>
4 ]$ k( Y' h3 u$ j' Y& \<meta http-equiv="Content-Type" c />
! J4 S" w/ T- x# K; c7 F' r: ~* H<title>css2.0 VS ie</title>
: N# m, O# j) x' [" }# {. r3 [<style type="text/css"> 1 [0 |& s7 h0 E' X& l; a
<!--
: E2 m' O# g8 W. xbody {
9 z+ _7 u2 m( y( Ifont-size: 12px; ( A3 d4 [5 d( G' }
text-align: center; . K U, A- j7 F4 m: x9 Z
margin: 0px;
2 }" ~# Y4 L4 {2 d2 q% opadding: 0px; 5 C/ P/ U' c- z; J! z1 c
}
}- y* X+ o/ g! h#pic{
1 ?- ~& H; S* e margin:0 auto;
( S1 A7 D: ]7 H/ |, U% V; n; o width:800px;
7 d* e2 h2 r" F! X% e# _2 ]4 D padding:0; 3 @6 E1 d* _1 R
border:1px solid #333; 3 P4 [0 M- Y6 a* F; I' V
} ! A" ?# `; l% i4 `
#pic img{ * C4 ]: B7 {' k& m
max-width:780px;
& Q' ?4 e8 Q, m* H" F- R" ?0 ?width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 U8 [4 x/ s* I! Y# ~# P( w9 D
border:1px dashed #000; + |* l& P" s1 T
}
# ]( p& z$ C+ U9 R, X-->
# r0 l' {- r1 `. t. }9 ]7 ~5 R4 M4 T</style> % x8 d5 t+ y- h4 P e" |. S8 ]7 I
</head> 5 f; n/ I7 ?2 D! R8 W
<body>
+ h- u1 e o( e: Q<div id="pic"> 1 A e, l# D* W& [9 A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 d9 v# ~, O( P% U4 L9 o. k</div>
u7 w' f- j8 q- Q% `! _& a: e</body> 2 u* [( F; T& i( N5 w, l# l
</html> |
|
发表于 2007-12-8 14:55
| 