|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14161
- 金币
- 2371
- 威望
- 1647
- 贡献
- 1319
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 s0 L5 [! P; e1 J: `! p6 s
关键在于：max-width:780px;以及下面那行。7 d1 F$ ` |" N
固定像素适应:0 J6 P* T4 G3 \7 {: j9 ~! C
- R) ` h9 A. V9 I* i, q
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> 以下是引用片段：; y- ?5 t: j: ?8 ?/ Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 n( A, o: ]8 ^4 p% C
<html xmlns="http://www.w3.org/1999/xhtml";>
9 M7 e; L: H. b- M$ r- V+ j/ E<head>
6 Z( }* ]3 X/ B D& g5 O<meta http-equiv="Content-Type" c />
; g \0 w9 b+ O# E2 @ p$ D. r& u<title>css2.0 VS ie</title> ' b; n* k# `" S( L& ~- ~/ B- `
<style type="text/css"> , t- D, c" d" ~
<!--
$ K \) n" h. d& @6 o! ?" W; Tbody {
8 N9 J3 S' ^+ F$ L: ffont-size: 12px; ; `$ k( e ^2 Q2 E' D
text-align: center;
X2 h9 b# ~* K7 ^; [2 fmargin: 0px; 3 e6 R3 y6 P8 |% ~% @2 I& s
padding: 0px; 9 x# \" y, d# n3 }
}
; V' F- Z( ^! B#pic{
# Y# J# H. O4 q2 B# e$ U margin:0 auto; ; p7 s, v% l# d. O
width:800px; 1 Z3 S1 b* @) H4 ~7 s
padding:0; ; B9 P2 `1 v, w \: n: G3 \" J" n
border:1px solid #333; 4 ]3 m7 \+ k% F- ^- o* M
}
8 E; C7 P: P' o% F. }#pic img{ ) w3 w! j( z3 Y/ ?6 h3 n
max-width:780px; 3 u8 R$ U% N+ C5 v
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 7 K/ o3 @7 s: c) R% T% n9 e) |
border:1px dashed #000; $ L# M$ _3 o9 K0 c/ e b. z p' z
} + c/ p. `( n2 v$ @: W( L
--> $ D. Y, ~' U5 q- o y
</style>
1 Z+ N# m8 l7 \. x2 Z</head> ) r# \6 i4 a* q( C. U, b
<body> # P' b% O5 A5 y6 a/ l8 G
<div id="pic"> 5 v) Q9 W) |2 r" ]3 [/ J3 z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 F( q: L @$ L/ m( O) d' B4 D</div>
4 X: R- x. E: @6 W7 P</body>
0 v! r. w+ {) @7 L1 v</html> 3 ^7 U; W$ `3 t5 q/ R5 c8 t' I
: Q. O* S$ O, @2 O
百分比适应:
/ E! [8 p5 \3 g- ^ H8 Z以下是引用片段：3 f a; g) G. M
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 a& h( Z" i4 ^+ p6 o
<html xmlns="http://www.w3.org/1999/xhtml";>
3 w8 i% d( R0 x+ n5 G! o# y<head>
7 M. e: y( Y5 i/ c! ?& c! w<meta http-equiv="Content-Type" c /> 7 `$ q+ ^5 v0 T0 ]9 o) W( U- X
<title>css2.0 VS ie</title> - B `; Q' f3 t
<style type="text/css">
) H2 }+ j* Y1 t; x' {1 o0 B3 t<!--
. R X- L3 i: @$ ^# O6 Xbody { ) q/ H9 U& O' b' p
font-size: 12px;
% @+ n( r6 M: I0 n. A0 b! Z: v( ^text-align: center;
1 o& Y7 s6 H! b/ N% u( O$ {- xmargin: 0px;
: ]2 |# F1 r1 |% ~$ A; r% opadding: 0px;
5 _8 C' L% B( ?; r% d} * a1 B+ i% |/ O: c9 r
#pic{
8 z/ N- Q, D( l) Q# a4 n margin:0 auto; ( }. ]. ~) x& q# T$ p% A
width:800px;
1 L5 f1 P& @/ N) { padding:0; ) b/ y6 O2 M' m8 t
border:1px solid #333; " Z4 S. u2 }& k H( C
}
4 M, P# P0 u( c" F#pic img{
# y+ j. C$ o7 O/ x' u! h: }5 Y8 _1 [ max-width:780px;
9 X% i8 }1 a6 z4 m7 xwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ N' `* K0 v" m$ ~; y+ Wborder:1px dashed #000;
+ q& t! J( v0 m. j$ Y9 X} 0 G3 {: G, k; t
-->
7 ^& Q- J1 N9 j$ {6 X- |</style> ) l5 D3 R2 F' N* y# B; B9 _
</head>
+ w7 b! m3 g* j* i! I% N<body> 6 d- l' e( u2 Y# u
<div id="pic"> + ^' d; J8 ]) V( ?" g; V U
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# a; c* O$ c% | @</div>
! V5 t B$ ]. N& ~5 W9 S: g</body> . U8 c; ?' e D' f; g1 o, S
</html> |
|
发表于 2007-12-8 14:55
| 