|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14163
- 金币
- 2372
- 威望
- 1647
- 贡献
- 1320
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。) T" y* E/ ]+ _2 e, Y" b5 W
关键在于：max-width:780px;以及下面那行。
! e3 F1 I5 R# c) J$ r固定像素适应:
9 D3 F: N; e* D! ^ E6 b1 o1 p# S# U8 K' o. g* O% S
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> 以下是引用片段：
: N+ G- ?! Q8 F2 G<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ C$ ~- a- b' ?" [5 s( j<html xmlns="http://www.w3.org/1999/xhtml";>
/ ~- W, l+ J3 k/ t2 f8 \. P<head> ( `1 ?' Q8 @! d
<meta http-equiv="Content-Type" c />
3 y& V7 c A7 k, ?1 `<title>css2.0 VS ie</title> . c3 Q& Q! q: r4 R/ M3 c
<style type="text/css"> 6 g7 i+ q+ f8 n9 \! Z$ L$ j: e6 b' O
<!--
+ h) Z$ t2 D/ P( G V* z2 P- sbody {
5 Y8 H7 o( ~' p1 t# G2 K+ Rfont-size: 12px; # w: e: H5 I; q0 Q% o
text-align: center;
' n* ]' }+ M6 C( zmargin: 0px;
/ q' g9 V# E, ?/ U. upadding: 0px;
0 J8 i5 m$ {3 l* Q5 v' i9 q/ q7 T} 9 n. ^$ r- Z; F: }
#pic{ l8 E+ a {7 r. E" {1 e
margin:0 auto; 2 v" M* c: p- I9 d. z
width:800px; " ? }4 p) N1 H( Z5 W9 ^
padding:0;
2 V% z* I O: t9 L" A border:1px solid #333;
G- f3 a) C8 A) V$ u& R }
* i' [* M' _7 g4 D7 b) I& L' m0 t#pic img{ ) d% H: E8 z1 I: M
max-width:780px; 4 }1 ?2 g1 q: C7 d( T
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 E! ^, B3 G% Q# M6 l3 W* z
border:1px dashed #000;
5 K" K, y2 v3 K6 y} : Q( R6 u }) [8 x' u6 e8 \
--> ' |+ F; d( d- Y. o& Y' s5 @
</style> & X0 U& D+ h2 n
</head> , `: W! Q5 n' w3 F# a( v& y+ `
<body>
t5 n# f8 s% @6 I+ d<div id="pic">
, _, c. O& x! k( P3 J<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# Q: G8 M# ^) q! `! J2 Y1 j. K% I [</div> 7 a" Q2 a' E4 F$ C$ ^! Q/ a6 J
</body> y: E0 P$ Y" G1 L3 E
</html> 5 d7 e$ [1 l: q) f- Y9 i5 {
( b. O4 ?) e: K9 g! v$ ?3 M
百分比适应:% X2 ~7 @: g% r! b+ K+ |
以下是引用片段：
% o6 g7 d2 { u2 e<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 v f% J2 d H<html xmlns="http://www.w3.org/1999/xhtml";> 2 @! r% _" ^+ m4 u9 F+ \* u
<head> ! W& ^ R9 h* x8 x/ L G
<meta http-equiv="Content-Type" c />
* F3 s: }, b. u2 Z6 c: J<title>css2.0 VS ie</title>
L' h# ~4 A P! r<style type="text/css"> 8 G* Q' h0 [5 x5 ~& n
<!-- w6 z. z- c7 W0 b4 }4 u8 c
body { ! r( o: O9 k% U6 S6 R) F" p. P
font-size: 12px; - D; O/ I" h0 I9 b# }* |
text-align: center;
* I: z9 l' q) a' ^0 C# D; [3 j7 ] dmargin: 0px; " l1 j* E1 v+ n+ X7 F+ r9 d# {; C
padding: 0px; ) |3 O3 I/ z; X) o6 D; P
} 3 g: V% o" l4 c/ v
#pic{
" c/ r L* s0 t' f4 s( \ margin:0 auto;
+ ^7 h6 {) g m' | u i) l width:800px;
+ y$ F ^; a: L& S8 m6 x! J padding:0; ) U9 |& G1 l0 ~+ A. l x0 p
border:1px solid #333; ! d. |4 `- L" K7 [6 G6 d
}
' c+ d+ ~$ K/ O; e#pic img{ * t# k; Q+ o$ H, b
max-width:780px;
; H- o0 L( A# }9 x5 s6 W+ {" [width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 E d2 y l, z/ K+ u0 [: bborder:1px dashed #000; ; I3 J) }4 G- \" ?/ x& A6 W
}
- ^$ s2 \' b- }, A-->
- l4 g# L! n# T; r: {* A1 j8 _: @" s* ?</style>
7 n' C; }! b8 @8 R</head>
$ `3 t, v2 U% ~% p5 n<body> 7 r( W' Q% d$ E% ~: ~
<div id="pic">
D2 A0 y% X" }2 o! J$ ^$ e7 Z: t<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! D& G. d! x/ {3 O% V
</div>
3 ?# P3 z( G' h* X</body> * Q3 x( Z `3 t- E7 K8 f& }
</html> |
|
发表于 2007-12-8 14:55
| 