|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14285
- 金币
- 2433
- 威望
- 1647
- 贡献
- 1381
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 v/ U+ v, }2 j7 m$ g: A关键在于：max-width:780px;以及下面那行。
* H$ r. ~/ `( Z6 a固定像素适应:6 A. J* K9 h! F4 R. q
# z2 d3 z. d% c1 h2 x) q# U! |0 Mdotted; 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 w9 Q9 y0 S1 j D1 T7 y8 Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' C0 r; K# w" q; `5 P
<html xmlns="http://www.w3.org/1999/xhtml";>
' \6 F; d9 x( Z6 W" z( j<head> 0 ~3 F1 w2 G' p4 [' \
<meta http-equiv="Content-Type" c />
( H2 D' _0 G7 H: a9 |% p<title>css2.0 VS ie</title>
4 W. y7 O- g3 ~<style type="text/css">
6 n5 b. a# G: M! j6 Q<!--
3 H& J4 S8 D1 Jbody { & Q. Q, X! \& p8 k4 ]5 J
font-size: 12px; * c, _% E8 ?+ Y( m$ K/ I# G& v9 S, ^
text-align: center;
% L8 ^6 W, Z. g% g1 {5 Y' zmargin: 0px;
* I5 ^2 n9 u2 p7 spadding: 0px; ) |7 {+ Q, z6 ^. |( c
} & t5 n$ s8 c( c4 U" K' C$ n
#pic{ ( d/ @7 C3 L2 I3 r! s$ @
margin:0 auto;
/ s3 T" M6 C* G1 n3 b( F" d, g width:800px; 7 ]; B) }# X0 |1 u1 I# |3 ]2 z* K. L
padding:0; & ~1 c9 h+ E# y0 H7 L& E X% W
border:1px solid #333; ( H/ w. F+ t, `3 b$ M
} $ U: i7 C$ S* _9 F
#pic img{ . A+ s# q- \! \ S$ D; x/ H) T- M
max-width:780px; 3 j# ^# [% G" P6 t4 C. q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
8 h$ A; T" M% Q0 o5 ?border:1px dashed #000; ( j' E( A: T$ T
} + D6 o2 x w' f* _ W- N
--> 3 B- A6 x) h! k" i6 p
</style> % V7 Y* s. H: L: d
</head>
2 O. K7 ^: J. j, q. h<body>
7 K4 j! t' l0 ]0 Q9 M5 [" E<div id="pic"> 8 f$ A j& V$ w- [3 _) k _* n
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 Y! a& G/ q0 q1 g: K) v
</div> , \ L0 |3 \* Q5 O0 ?* ^
</body>
1 M! @7 r* ]. ~6 g: S* ~</html> : K# K* m m- m' |% y& l$ H
, ]- V# n+ x: q" T/ h百分比适应:' W. ?: R+ d7 e- A* u
以下是引用片段：
: K {( b9 I' W# e8 E/ N# a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ( e! r/ w- ~7 D# f2 }' V
<html xmlns="http://www.w3.org/1999/xhtml";> : {% ^. ?" V) i
<head> ) R2 m9 u1 w) [& B4 t, T
<meta http-equiv="Content-Type" c />
# z+ |" Q5 u# q0 f<title>css2.0 VS ie</title> # Y$ o; a; x' m2 e$ f
<style type="text/css"> * u, N) K3 G' W3 m' Z0 n
<!--
% N) A9 m& w Wbody {
$ J5 W6 U2 C8 d1 O# ?7 Cfont-size: 12px; h. Y, T n" C
text-align: center; - l+ q3 \9 B, q' \. |* T2 ^0 o
margin: 0px; 6 P" k |9 T0 h- g
padding: 0px; * t$ q' U- ?6 I" A/ B& f) [! D; o
} 8 }8 R. o1 l6 C- ^
#pic{
) Z4 d% `3 e; |# P margin:0 auto;
3 W3 G! w( i4 A width:800px;
) c' Y' e& v% `7 i2 i- ? v padding:0; 4 L0 C2 @0 R0 \( e2 W
border:1px solid #333; # h1 I% C4 i9 `) w- X" x) t
} - c3 }8 y! r" Z0 Z% j5 [
#pic img{ " i# P: e- M5 V, Q. H3 C' f
max-width:780px; " Q4 ?' n) t$ c9 q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 5 r Q+ [5 X" L3 E* T; a
border:1px dashed #000;
$ o3 j* Z' U. Q a} 6 Q* F8 U e* d
-->
6 I3 z+ J! W7 f+ {, s</style> $ v# d1 e) _0 F0 E& A. H. g
</head> c1 m6 v1 v, ~8 B0 x1 N0 ?) L
<body> - I: |* u4 h* B- P( l
<div id="pic">
- X) g# V6 K; m! J4 ^! y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 ]- V4 s7 o0 |! s; D( r4 E& E( S( G
</div> 1 K, k0 Q8 F& J6 |" f& l
</body> - w" x8 D6 T$ G" X: P0 }
</html> |
|
发表于 2007-12-8 14:55
| 