|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 L' m0 U* k' Y" J关键在于：max-width:780px;以及下面那行。0 S# i: h& y2 e) X( [6 Y
固定像素适应:
% z: T7 t- X% m
. \" F: {0 U! w! edotted; 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> 以下是引用片段：# w: s. r' b- G+ F7 Z/ n9 ?7 {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 l0 s" s% a) J% w( O/ y6 F2 }: v9 Z. ?
<html xmlns="http://www.w3.org/1999/xhtml";>
5 b3 j" Q. k9 K! M<head> 5 b, `8 w+ \ O' L2 { ? Y
<meta http-equiv="Content-Type" c />
( E+ e; s+ O' k# E# V, p<title>css2.0 VS ie</title>
% K$ ]! q, m, |+ S. o" b<style type="text/css"> ; `8 X2 F0 O6 w& ?3 Y- g# u. B
<!-- ' f0 \, F) d& ^) Y) n6 S0 u
body { # r; C! G% w9 n
font-size: 12px; 3 C0 B5 Z! p% A& U" z( A2 e8 x
text-align: center;
1 O% l; z; l# j8 z. k3 |; t# Fmargin: 0px; ! L1 L$ y0 y( u$ X1 Y, p6 \
padding: 0px; - v$ A" K1 W: M! M
} 8 m: k2 {' ?0 {3 T
#pic{
4 b; T) O$ k$ ~ margin:0 auto;
f' `( f6 L$ k. z2 ^ width:800px;
: H% E, s& x7 h* c& p$ [ padding:0;
% ?/ M0 O- Y: j4 X6 M$ s/ ?% A border:1px solid #333;
/ d E; a# K8 a, ^4 G8 m } % q0 P% L2 g' I# T0 L3 R& n$ @
#pic img{ $ D, X/ T/ v0 J5 t7 p
max-width:780px; 1 s. }. `( q2 L3 e8 p
width:expression(document.body.clientWidth > 780? "780px": "auto" ); - k6 e0 ^$ ~) f! |$ ]
border:1px dashed #000;
0 T! \* C) p1 t& \9 j$ `} 1 _2 X1 c0 k- s
-->
+ O) O$ y: |) ~</style>
# I. W% j5 D; I& |4 \, _</head>
; Q% q8 A/ ~' i: v3 e! K<body> ! ^/ Y& H. \8 G% o
<div id="pic"> + B" r% {8 S' q4 U4 \6 v* _) F
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - \; R9 L8 u( ~7 Y' z
</div> " A8 C A ?/ ?. q( e* q
</body>
" l; z3 E9 X0 _- H3 m. w$ p, O</html>
1 O* H- E J R+ ?' b1 t* E" U ^( h; ~4 I4 a* l
百分比适应:
, b5 _/ q9 C% C k. G% \0 a+ R以下是引用片段：
9 _% ]8 w, N9 l' l+ B4 t! Z<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 S# W: i( d# A2 E z3 C- ]$ A
<html xmlns="http://www.w3.org/1999/xhtml";> - ^6 @1 _* q# {. i
<head> 1 ?# Q: I- `. E6 m8 W
<meta http-equiv="Content-Type" c /> 1 ^' `. o3 H& Y. b
<title>css2.0 VS ie</title> " `0 B, c$ U$ x( i) w6 N
<style type="text/css"> , i; n R; T% f; u
<!-- 4 N/ ^' `+ T: k3 R& w
body { 4 {' U+ [ Z6 K9 W0 p
font-size: 12px;
0 V8 U% w- t$ O7 @# k1 H) [- btext-align: center;
( g" n1 o, [- j( X7 K3 @$ _margin: 0px;
# M4 X5 I! l, Kpadding: 0px; . T- ~- D) M/ \$ I
} 7 l% F7 M2 t5 R1 g! d, b1 }- w
#pic{ 8 ]% Z9 ?5 n' w8 C
margin:0 auto;
; ?& X5 X: c6 H; ` width:800px;
8 N! q G; l6 ?# N" a1 k padding:0;
( q* ^9 s: O3 o4 h% C border:1px solid #333; 2 h) s1 T1 n B3 P7 {
} # Q' H6 U% L- z0 F7 p; f
#pic img{ $ O+ ~* X! Y, c$ o1 _
max-width:780px;
2 ?/ k4 ^3 o, j! j, Fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 z: Z& Z# y- _: C0 @/ Z! M
border:1px dashed #000; ; [, O: N, m+ r
} % F% D3 o' p/ a+ B) w* _
-->
: | G& \- K/ l" x) \8 t5 [$ f) W</style> / `: a+ @! S2 K
</head> 8 }0 I' H( B7 i5 T$ J/ r+ y; \; ?
<body> " [/ c* s2 x8 Q
<div id="pic"> 1 z! D& g7 f7 n) S+ Q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, N2 c% _6 k, W- H</div>
* Z; c1 {1 ?# ?</body> , a9 ]) \5 c a0 A- O# A' V
</html> |
|
发表于 2007-12-8 14:55
| 