|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
8 u( _+ s3 J( _关键在于：max-width:780px;以及下面那行。
% ^6 L: E2 m( O" W2 a固定像素适应:, f" b ?1 B) N+ |2 |- P! r8 y
4 R9 O& o6 J2 h. d7 B
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> 以下是引用片段：
% I5 g; y) t- J+ l" y. F1 M<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / w" j( H0 Z" x* [, h- r
<html xmlns="http://www.w3.org/1999/xhtml";>
$ i' h: L& C0 O! @% `0 K<head> ( {' t$ M* G t6 _. H
<meta http-equiv="Content-Type" c /> 3 L! H! d- V. t0 O# G0 _2 H( ^
<title>css2.0 VS ie</title>
$ B+ \, Q" F6 h v4 a+ M( Q<style type="text/css">
& V/ v7 { g2 w- T6 C1 S<!-- : z9 ~" Z" t5 A1 _1 v
body {
, P8 k7 c3 z" |3 m' Z% ~font-size: 12px; ( M2 b$ W8 [3 {% q
text-align: center; 5 q- C* l6 r( j4 U6 G( c
margin: 0px; + {" r0 Z, G: M9 W) H! w& {
padding: 0px; : L; Q; o6 b+ i6 H
}
% I) l& f8 r G* i/ {4 S* J! W#pic{ 9 Q2 f' o9 H- {
margin:0 auto; 7 o, [8 p) ~/ V9 a x0 X
width:800px;
; s6 p. ?0 {4 }. @( j padding:0;
4 P! r7 b) p1 l& b border:1px solid #333; 5 X7 ?$ X) F& @: L0 f
}
/ T: n( V+ {. S! s+ g#pic img{ 3 L7 j) I6 B% R0 ]2 g% i
max-width:780px;
! W" X, c C2 I0 c: P, zwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
+ h- c1 M* \0 Z9 c: ~, Nborder:1px dashed #000;
3 Z' S# T( @1 U} % H( }( X0 g7 ~% `! d! [) c
-->
) s, } j+ O8 b</style> : U; [- p4 E( Z; l" p9 d+ y! ?
</head>
+ [9 @1 U' w8 H4 H2 ~- v; E5 M<body>
* D# F! q2 I( X" Q6 P7 q<div id="pic"> 3 @& i! q0 F# B' b
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: v8 {6 V4 {( q, C0 a8 O7 P4 v</div>
/ O/ O0 }+ p( ]6 Z/ \' y/ k$ \& ?) W</body> / f! n& h$ e# T. y4 I+ C% x
</html> " W" f1 T1 a" s5 T0 }7 y4 Y3 T
: M/ f3 q0 L* }
百分比适应:
( F9 L& o0 l, i& m( U6 D! u/ p, O以下是引用片段：
( C1 E% M+ f" o- g* m7 u<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: H5 t0 C/ V e& g<html xmlns="http://www.w3.org/1999/xhtml";> 9 L! |+ v# I' ^
<head>
; n( O7 o2 ?) q8 @! _7 a, m<meta http-equiv="Content-Type" c /> % f1 C/ F& r: G& y3 W
<title>css2.0 VS ie</title>
2 u; Q: v0 \& f<style type="text/css"> ! }- x: B X" p5 z) I
<!--
, X& X( w$ ~0 M( p% \body { % B3 v: k. @. ^6 W+ f
font-size: 12px; + y9 K7 t. W3 ^% `2 ?, R
text-align: center;
+ z! @" G& \' U5 @$ Vmargin: 0px;
8 E. T8 W+ A- K( cpadding: 0px;
: N0 d2 }- M e) B/ Y+ b; T4 {# t0 s% x} E, k6 x7 Q; V- O# m
#pic{
" d0 h+ w- z" ?; n0 d margin:0 auto;
7 e4 {' \7 Z9 y0 U- { width:800px; ! s; u' f3 a% v
padding:0; ; c- ]4 h( `* D; m$ L5 b6 F
border:1px solid #333; . o5 n8 Q% V8 w
} 3 `9 N1 u# \1 O! u& D9 I- q
#pic img{ 4 [$ g5 t8 @) h$ w
max-width:780px;
. ?2 c( a9 x3 }: j5 M5 B) M; bwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 7 n2 a8 E1 m* m' v7 i- a: g& Q
border:1px dashed #000;
1 }# d$ V; F, N8 T% [4 N/ |0 H}
% T+ ~8 L& D$ h) u; g--> / @: h* k3 E" h+ }# q
</style> $ L: q% c! z. ~; R
</head>
: u- J3 Z6 T+ ?% { @9 J" }6 R# M<body> 0 v5 k6 b$ u- u' w
<div id="pic"> , @! w* P7 j+ g9 E. N$ G
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 D _1 ~. w0 Z+ B' D/ V+ N</div> 6 d4 m! N9 I9 F0 _
</body> * C$ g: h1 L" E( d- Q c; y
</html> |
|
发表于 2007-12-8 14:55
| 