|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14421
- 金币
- 2496
- 威望
- 1647
- 贡献
- 1444
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。9 C; w; U5 ?2 I: j
关键在于：max-width:780px;以及下面那行。/ F# o+ o: b6 Y8 g* [
固定像素适应:
, |0 G" E, X( a% \& h3 q- X- l6 {
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> 以下是引用片段：
2 a, i8 D0 Y1 J+ g1 f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- k8 h: G( \: [# ]( q4 Y3 `<html xmlns="http://www.w3.org/1999/xhtml";>
! A0 z+ w9 S% o' E<head>
$ P/ Z9 M3 j3 r6 {* g4 B<meta http-equiv="Content-Type" c /> - A& Z5 h9 \2 r+ }5 P6 W. q1 M2 T
<title>css2.0 VS ie</title> . ]/ ]3 G( p+ Q z
<style type="text/css"> / {8 C1 O( ~3 m8 B/ b* p
<!--
6 \( |7 K" _; ^body { 3 T& i4 Z3 O9 [
font-size: 12px;
2 [7 `. P4 p* K4 t6 [6 K i( k/ dtext-align: center;
6 ~% q; q5 k$ j( ?. pmargin: 0px;
# T5 y+ L& w0 \) l+ |) w5 u" fpadding: 0px;
1 P. Z. ?- D- i* F+ f' Q$ ^# m}
3 R. O ~5 A" x, M& c- C#pic{ / g, V+ _: j6 z! S6 @" [- s
margin:0 auto;
) e& A0 n* v; c8 j9 z7 z& O+ R8 i width:800px; ! p9 i0 P0 m* `8 u5 d
padding:0;
3 Z( A* o( ~9 ~3 } border:1px solid #333;
3 A7 ^7 Q' E+ a# G# y0 a& { }
4 \# ^" ?0 n6 D& y+ j! C& ]#pic img{ 3 g# Y1 ^: l( J7 z
max-width:780px; 5 R: b0 R7 l% D: r$ \& j; S+ R
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ' ]8 h" P& L) m* N6 m4 }
border:1px dashed #000;
# G. i6 b5 F2 R$ S5 {7 }}
' o! Q8 E+ H( f" b$ z, Z-->
. v4 D; L4 ?" l9 Y D# {</style> ' |2 b3 e1 ~2 {
</head> & o; j4 l4 |! i/ c
<body>
" ~: w1 h- N0 ~/ a6 a$ ^1 r<div id="pic"> 5 a. p. M8 q# _: B4 M
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . @4 |& ^# O, M/ b
</div> ( Z' Q! z' [; @ {% K
</body> + o7 s$ z8 E7 `0 b) {8 ]0 @3 R
</html>
8 U% p: k- t4 i* ~7 I
* o% f: n- ?/ a* p# Q百分比适应:2 v1 H* W: W& Q: b
以下是引用片段：/ X4 l! e3 s- I; ?* G3 f/ f1 [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 K+ S* p" [/ ?- P& i& N
<html xmlns="http://www.w3.org/1999/xhtml";> , [# L2 t' l2 z' A
<head> # q7 F: c7 A p) G5 h, N
<meta http-equiv="Content-Type" c />
' a7 K+ B, o) Z: f<title>css2.0 VS ie</title>
# I5 u/ T" _& u; U! ~' j" s<style type="text/css">
% _9 W" E @2 i$ p<!--
) J9 z( R$ f( v& F4 L2 r: W5 f- pbody { 5 p1 g# B1 K. h' x
font-size: 12px;
% _. u( D1 N! v+ A5 m$ \text-align: center; 2 T# E! Q5 H. e' H8 o$ K
margin: 0px;
* P; H/ q$ K0 H$ Qpadding: 0px;
0 W- R/ y8 A: p/ I# w/ o: Z) K}
" K1 ? ?6 s5 g0 o" y#pic{
6 P) o5 L4 }% e' y- J6 `3 } margin:0 auto; & m1 z$ m0 v$ Z) O
width:800px;
: g- H( T- ?& r8 u- F7 }6 N padding:0;
( o- T& m { Y2 @+ X' t border:1px solid #333; 9 c2 M7 n' k2 u7 \, I* d/ \+ Q3 O
} 1 X( t2 j4 D% w+ C- z R
#pic img{ ; q0 Z3 ^9 U1 U& C* v
max-width:780px;
) I0 N, W8 c& C# r' |width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" p4 F* n; i) q& t5 M7 |- M iborder:1px dashed #000; 6 |9 D# { u1 W( f, c- f# ]; p
} " }' L" s2 C) V
--> # o' i4 F1 m( J1 x1 M
</style> . h/ B1 O( t$ o
</head>
: f/ k* s1 m* z6 }" I( {<body>
{/ {' B. r& v( X6 t4 m+ D6 J$ ~<div id="pic">
' T( g9 ?* }0 U2 v- v+ a<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( a3 P3 Z& M, G
</div> 0 t& i8 U$ ?! Y+ T7 i) y/ s: Y7 m
</body>
9 p- b; |2 {7 f3 K, j; U3 b</html> |
|
发表于 2007-12-8 14:55
| 