|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14325
- 金币
- 2448
- 威望
- 1647
- 贡献
- 1396
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。. Q/ _- u) |/ K0 Y8 K1 s
关键在于：max-width:780px;以及下面那行。) T% q6 z E& ^0 I' r' _- i. g2 b
固定像素适应:
) R5 s! G0 z6 Q; E" z) g8 l0 A1 m6 S- i$ d
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> 以下是引用片段：9 H( n, N" H/ |3 l$ u" F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, s* m/ G O7 i9 R( ?<html xmlns="http://www.w3.org/1999/xhtml";>
2 U& [/ S" n9 ?0 c% V<head>
% `, F8 c% X) D- L<meta http-equiv="Content-Type" c />
6 x4 |' ]4 }) ^$ A- _' P<title>css2.0 VS ie</title>
; B& o8 V+ F2 K: O4 G<style type="text/css">
9 X/ L) @1 l& j: f9 X0 x- A+ a4 U" B<!--
) x" t. m$ S8 m4 Z, xbody {
- t* }5 P8 f' {- efont-size: 12px;
6 d, J R1 B8 q7 O1 ~" Ttext-align: center;
# P! M* i8 X. a" K5 ?margin: 0px; 2 `! K6 J! |- L/ z
padding: 0px;
3 ^3 w4 [% b( o/ l2 F} ; g9 R5 h8 Q* N4 Z( z6 B% u4 m
#pic{
+ I+ }; X+ o2 U* a1 ~% K" c margin:0 auto;
_& y; o) J8 `" j0 | v& V width:800px;
- d8 O) R' ]9 U4 r: V0 S padding:0;
1 [* T- i% ^+ {/ K( M border:1px solid #333; k- r& m5 P6 q9 }5 `' Z
} ! \# |3 d$ i) T: z0 l+ E; J1 d
#pic img{
% c P H: L1 {1 |0 ]* O& J max-width:780px;
# H5 F3 [$ o$ owidth:expression(document.body.clientWidth > 780? "780px": "auto" ); : A+ Z- j4 n1 G) u7 _1 b- z
border:1px dashed #000;
. v, o. K8 C0 u1 r ]1 l* f} 0 l+ k/ E3 H7 Y0 R+ g
--> 8 o# V2 |9 j2 a0 C; a! ?
</style>
% |3 s, u$ S8 I! R6 Y7 _</head> % J2 b$ ?* r: P, m' J/ u! A
<body> ; M( }5 U2 E! N. ?& w6 r- e
<div id="pic">
* `. k2 V3 w/ g<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & p+ T' ]3 W) s" D* n X* m1 L
</div>
: s' o0 y; @8 S</body> ) c7 v+ m& ^4 Z: ]5 C4 C. J8 ]) c% d
</html> 6 ?7 s2 \8 B# E( ~5 a7 ?
6 n! {, L" t; Y7 K' j: V* K, d
百分比适应:
, N* e4 @9 e9 A以下是引用片段：
% K7 i0 ] w3 r) k& O1 q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 b+ e3 m% F }( F; W<html xmlns="http://www.w3.org/1999/xhtml";> 5 W9 g- R$ a" Y: r! d
<head>
& q9 ]0 s2 z% w7 m, u<meta http-equiv="Content-Type" c /> 6 o! d C' {) t r. J8 y& i2 y' N
<title>css2.0 VS ie</title>
, t5 \- h$ S) b6 `- X% }<style type="text/css"> 6 b/ L& ?/ v/ g4 }6 T- Y, c
<!-- ) @9 ?' @$ m j& c% N8 h
body { % z4 E, D3 u9 v
font-size: 12px; ( e+ D) A' U' U$ R) r
text-align: center;
2 \& M/ E' v, [- Hmargin: 0px;
+ f! D) c) B' T7 Zpadding: 0px;
2 o8 H4 W8 ] t, G; S1 b: \} . q, Q& S0 ?4 P3 r4 [
#pic{
, t! q, Q2 h3 q: \/ D' n margin:0 auto; ' n8 P0 B) J' x' n' r
width:800px; 5 z3 c# O( h, T( P' }* ?" z
padding:0;
9 K- q. R3 N B4 ^/ N- c! X* m border:1px solid #333; / X* x1 } F$ l6 L" F. H5 v# \, A
}
, q# L F; `4 D+ m7 g. q#pic img{
1 P- q4 z& V+ T/ b7 ?3 ^( e max-width:780px; ) c: a% H) f" y) T) ]2 m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); % z1 h( Y5 V% V- R5 S
border:1px dashed #000;
. F& C! K3 J5 s. H! `}
, ?7 z$ A, Y& J, c! [5 N' T--> 9 @6 f0 d1 y2 q- M- s
</style>
) D7 N5 Z# Y. H# e, F; ~</head> ' E6 G4 e7 w! f' r
<body>
. Y$ \% T7 k+ q- d! i% ]<div id="pic">
# `2 x- x. ]* A% o7 ]6 V<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- K2 v# {8 E5 I$ u, U</div>
4 G, g* z/ s( N- K</body> : n% T' ?: l8 S/ E* Z/ I
</html> |
|
发表于 2007-12-8 14:55
| 