|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14399
- 金币
- 2485
- 威望
- 1647
- 贡献
- 1433
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( s' t" k$ \* T+ m6 y d关键在于：max-width:780px;以及下面那行。0 k6 y# O8 K( U8 y. R9 b; A2 N
固定像素适应:7 _5 X) V& j6 Q4 P b0 ~5 j) I; q
8 Z/ F p' K- j( Y2 O' h
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> 以下是引用片段：
- m# m9 b! v2 ]% E4 S( m; ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' i e; s/ p) H9 D" U0 N+ R
<html xmlns="http://www.w3.org/1999/xhtml";>
* B3 X$ J: W( Q( R1 L" h- x9 \) x4 x* J<head>
, R: Y4 ]$ |3 s. q& e<meta http-equiv="Content-Type" c />
2 e, _* k7 m8 q3 b K<title>css2.0 VS ie</title> 5 r) B# o( P, h& u# y
<style type="text/css">
$ ~# L$ O( z: L' V9 k<!--
0 |: {6 g% f. w' |& Y O0 Rbody {
' F5 {; k5 t- K% jfont-size: 12px; + |( j1 ]! X X8 u9 ?* J
text-align: center; * r( {: k( R( `' o r
margin: 0px;
: P! q d9 R' ypadding: 0px; % g6 \- N: J$ k6 d2 d$ q
} / s, R9 z; O# q
#pic{ ; U* h5 \. D( Q! t+ i) s
margin:0 auto;
) Z: |2 }5 P+ r1 D width:800px; 5 K0 v2 I. j, Q$ v
padding:0; 6 ]% B# t# } |" E& F: R: \
border:1px solid #333;
% V' O2 r4 x& t5 y; M: C; d }
. V% R; Q( l/ G6 b# F$ x9 J) r4 a#pic img{ 1 |, J8 `) O7 ~
max-width:780px;
" |+ R2 U7 x4 Zwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
$ ^5 V, C, w/ s h( m1 Cborder:1px dashed #000; 0 l, B; O' ^, e
}
! d6 e6 z$ S, g4 \. Y, E! Q--> # v; N. K& a1 f) i5 h. J8 S
</style> 0 O7 ^3 v4 d6 l" b% \( v
</head>
4 j! Q! w6 R6 S H! k9 R5 r5 _<body> " T& l3 f$ O: @; l4 e
<div id="pic">
) H0 x# {; R$ \& Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: g" ~4 Z+ M( o5 D1 O# ]& z</div>
# [3 E, \1 Y2 V. A0 o</body>
+ [5 Y6 E; N- J</html>
. x* J4 s, n8 s5 x
6 d0 e% D. p3 {. d0 G+ ?, G百分比适应:; z5 L1 {0 \9 ~0 N
以下是引用片段：/ ]. T1 A5 @/ l$ ~( d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 U( u1 f* K P8 Y ~& o<html xmlns="http://www.w3.org/1999/xhtml";> 0 Z( r# A! k1 b3 m8 M
<head> 8 M; B* w! D- a' u6 R, J' d* y
<meta http-equiv="Content-Type" c /> Y: V H0 m8 i% p- J0 x* I, U
<title>css2.0 VS ie</title>
) c5 |4 q6 i! n7 `* L( C; g<style type="text/css">
n9 p( _+ W* O- \- D<!-- 3 R% M% D, b4 }( n, h1 t
body {
- S& L, m& Y# G S( u/ u3 qfont-size: 12px;
+ U4 }- `7 l2 J5 ?& `text-align: center; 6 k0 [4 p3 }% {2 l8 j2 ?
margin: 0px;
' W2 r! ?9 Y% c) V% | ~padding: 0px;
- E* H# ` |$ P8 t3 s' V U}
5 I/ `# B8 j% Q2 U2 B5 o4 f#pic{ 8 k, h, x9 x$ W% O. g! v
margin:0 auto;
& |/ Y5 W# {+ @/ S& X! f% {- x" R width:800px; l0 o1 [ d$ T2 r: t3 u6 O& I5 [
padding:0; - h$ X" Y- K% E9 e2 I" o
border:1px solid #333; 6 p) d; p0 m9 d6 c+ O# X- d) x- Z% e
} 9 s, Z5 u/ h9 k( C- C
#pic img{
& i. E4 u1 ?- D max-width:780px;
0 O I0 T5 T4 w7 ^width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 h" J: I2 }/ ^* h6 I$ G% i! W( N: Xborder:1px dashed #000; Y! y) X: K( i: a8 h
} . N+ B' V4 P V, U* n9 |3 F8 c
-->
0 q, h& U/ v0 y+ p* R: I</style> - N( R. M T% j
</head> ( x8 Y" O/ e- t/ \ E
<body>
5 q) a, D2 r1 M+ d8 \<div id="pic"> + O+ N! u, K+ `% A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% z& J/ [- ?7 g) G6 C& q: ^: m</div>
) i1 U" ?7 M6 K, h" Y. e& e</body> : r% m! C0 W2 g2 E) l
</html> |
|
发表于 2007-12-8 14:55
| 