|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 G: E6 s \8 e% Y; X
关键在于：max-width:780px;以及下面那行。
1 H3 I4 \! e1 {) b( R" V固定像素适应:
3 D0 l W6 F( E V1 ?0 O4 F
* U4 G0 i4 i% K5 A* fdotted; 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> 以下是引用片段：& \) y& D- Q1 b: B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; S0 X6 H2 b$ d [/ H5 m2 ^+ ^<html xmlns="http://www.w3.org/1999/xhtml";>
" e0 o/ I! Y7 O+ L<head>
# a% \# X9 [* }% U4 h$ ~<meta http-equiv="Content-Type" c />
8 ]4 y# o3 E8 r% ?<title>css2.0 VS ie</title> 2 D i: H% T' W3 D
<style type="text/css">
( j' z4 B9 E3 |% a L& \<!--
6 K! F+ j# s1 G/ s, n( Y1 Gbody { ! ?- B6 C* x, z' \
font-size: 12px; 8 V2 ?# A- n1 Z2 ]
text-align: center;
# ~. ~1 d9 l' l& mmargin: 0px;
8 ~" p6 ^4 P% epadding: 0px;
, G& _7 N7 U3 {$ e7 R- Z( x}
0 E$ L5 u2 B, f, d#pic{
5 s5 G. U5 o4 s6 g5 X1 b2 ~( E1 Z margin:0 auto; 2 f, i5 Z# a& ~4 V5 Y* _$ N
width:800px;
. b+ [ P J" x9 e5 M7 r) _. g padding:0; 5 v( M1 X( w, c# V5 s2 s
border:1px solid #333;
6 Z5 n7 w! X9 N7 U! {6 R/ _: m! u" P }
5 k) |$ D, s. d. ~# o#pic img{
% J- Y" o/ n7 R( R! g) b5 C max-width:780px;
& _5 H! _! R( g& m; p$ a7 @width:expression(document.body.clientWidth > 780? "780px": "auto" ); 8 Y- O; u# N$ c2 }, J% \9 O
border:1px dashed #000;
4 j' b4 l3 @; J9 x( J& c. j: w}
8 I( V$ E% C, `: y0 F-->
0 I ]" J* J; i( y1 t9 h</style> & G- r0 P( P+ ?
</head>
* x3 {, h% \/ ]9 }8 \/ `<body>
" {7 v% S/ ^, W4 |/ K4 ^<div id="pic"> ) e6 V* L+ T2 @$ Q8 K
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : N% A- S" z/ R) u
</div> ( ^1 {; y& N/ ^( v& s% T
</body>
! L J( u( p5 O9 B5 L. E; U</html> % E8 m" u4 _* e) ~1 L$ ?
# m7 ~! |; H" m! h; _$ C
百分比适应:
5 i& U6 h; H/ P( @8 ?0 Q以下是引用片段：
. W* ^2 Z4 C' p$ L: d# h: b$ }' ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . y9 f* F# L' p9 _3 Q6 E, N
<html xmlns="http://www.w3.org/1999/xhtml";> / v. t1 s+ N5 ~$ A2 ?
<head>
5 t) Q' S, \# M! i; Y* T( I0 C<meta http-equiv="Content-Type" c /> 0 C1 _- T% l& S/ {7 I
<title>css2.0 VS ie</title> u5 F; H/ T2 {$ G
<style type="text/css"> - C! g& X2 a: O& o, c: p
<!--
c" g, R7 r9 W: W- D" r- lbody { 1 l$ n6 e# m6 V; M6 t7 h O3 D
font-size: 12px; ! D# x# w- S+ l' e, |/ q0 Z
text-align: center; " {; \, P0 x8 ?; M
margin: 0px;
8 p4 E1 F1 u) F3 `" Y# E% m. j. Opadding: 0px; $ j# {3 Q: {: r* u+ H
} $ `% b- |+ S9 }; H1 N* v* P; l
#pic{
, J- F; |. \0 O. p margin:0 auto; 3 i* s/ ~0 w& w; b
width:800px; ; G X, Q+ r: \9 [ M+ |( k6 @3 S2 {
padding:0;
5 u6 N4 I. r0 h' D! t border:1px solid #333; : T9 r( l5 b6 }: ^2 E" Q$ X
}
5 Q9 ?( k! t8 J$ _5 l#pic img{
8 i6 V" f6 z$ }9 L max-width:780px;
+ s- M7 V% J- e/ K% r+ Hwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
: ~! h+ n( m$ p' i9 m$ wborder:1px dashed #000;
: T E& G5 J9 e* q5 `7 {" Q1 f}
, J' S0 ^: h2 p2 O0 z-->
& w& ]2 B2 r0 C1 Q; X2 n3 [</style>
/ \4 J" W$ H7 R+ c" P( e* Y</head>
( X' T8 @0 T/ |3 ~4 h6 v' f( }<body>
: {* l2 i `; ?! [# X<div id="pic">
2 O6 F& k# }1 y; e8 b+ B<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 b5 x- k4 A' V+ D& e4 y: Z+ z</div>
0 c/ u' T1 |4 J- j</body>
$ B( G6 s1 V; C! o6 H2 k</html> |
|
发表于 2007-12-8 14:55
| 