|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14435
- 金币
- 2503
- 威望
- 1647
- 贡献
- 1451
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* B+ a3 W3 N. _" G$ @' A2 r
关键在于：max-width:780px;以及下面那行。
5 W( _3 ]1 A/ Y' U- n+ d固定像素适应:
6 s6 h3 W# }7 H: N- s5 S# V8 ?3 ?
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> 以下是引用片段：
5 g; Q: n( S1 Z% [<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! _6 x3 j5 h* x
<html xmlns="http://www.w3.org/1999/xhtml";> $ O7 Q0 ^% n' q
<head>
0 e2 z2 y( R8 j; J<meta http-equiv="Content-Type" c />
+ g5 i, V+ Z, q4 U' B<title>css2.0 VS ie</title> 1 K0 x, H9 v, t& b, c; v+ {2 S2 Z
<style type="text/css">
! g! m6 p8 v+ w- P# D+ p- C$ V<!--
; y8 l) @& z- Ebody {
: {0 f( A3 E- s# hfont-size: 12px; # h6 o$ f# {, j* ?% W6 g. X
text-align: center;
( F" K2 w8 F1 M3 b/ `& z/ P4 n qmargin: 0px; 0 T3 m& E v$ w, g+ A9 S
padding: 0px; 2 h* \0 h4 n( D" b! S. a4 w3 N
} ) C- b1 k4 ?4 ? s6 W: C
#pic{
9 B- G- C* } E margin:0 auto; - J8 R( L1 q9 |9 Z7 L) [6 ?. }
width:800px;
/ a$ o7 Z# b ^ padding:0; ! X# e6 ^* D+ e# j" l
border:1px solid #333; 0 |- T1 Y# _8 v: Y
} $ `7 ?, O' j. f4 H
#pic img{
9 j5 s; }* J! w) S6 Z+ E) F max-width:780px;
4 Q5 s: j6 U |+ ]width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 A2 E. S& a# W0 o2 ~" T' mborder:1px dashed #000;
0 e7 u, N: t" M) V5 y+ N7 C2 c s}
- \5 t" U3 K' v1 L. u-->
% z0 U ^4 }4 h</style> @8 e0 _( L1 z ~0 g
</head> # Y/ m# G! l, z# u1 ^
<body>
# F7 O0 ]* I& k7 P" `) v<div id="pic"> ' y5 u5 X% M* h& ~2 w2 T% a
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# w. ?' j7 I2 T, t; a$ U9 p# }/ N</div>
" {# r6 l7 W" h5 N$ [</body> # v; O) s5 ]* i- [8 f
</html>
1 ?, x: {" J; J2 H/ r" h4 S$ p% r* i; Q+ q: ?5 Q# u3 L% t
百分比适应:
1 S1 I" R" O8 X/ W以下是引用片段：
( S% a1 S3 e' {7 \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % e# N; [" b, l: u) u5 g
<html xmlns="http://www.w3.org/1999/xhtml";>
5 U0 l* [) I! r! V<head> 6 Y" b" f. H$ p: u
<meta http-equiv="Content-Type" c />
3 I2 t, [2 h0 d6 i. h) v<title>css2.0 VS ie</title>
) o, n4 i& I( E( F1 J<style type="text/css"> ' b" S) S/ d1 {5 H" M! w
<!--
0 U; H# H& O1 Pbody {
+ K' |* q1 T& w9 q6 h5 t- _font-size: 12px; B* Q, b1 B( \( M7 A
text-align: center;
7 v0 N3 t" E+ T. i' x" z; k2 R; h6 Vmargin: 0px;
* C& V- o3 E) L! rpadding: 0px;
' \6 G$ o7 ]2 i, i4 l0 d& K; P/ S: ~} 2 I2 v: ~. W# Z+ n
#pic{ 5 R& J0 r# y1 h `; n& V
margin:0 auto; 7 s3 R% A. r5 ?% p3 s$ ^
width:800px;
, Z. B6 G% ?' j3 |& } padding:0;
( T2 x( V/ |9 m6 X( P border:1px solid #333; & y1 b1 K X0 I3 B2 ^9 {
} 9 T" [$ o9 o1 F+ }2 p" Q3 F
#pic img{ , ~0 D l$ A. T% F
max-width:780px; % }+ S2 w a/ i+ }8 a0 u
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 w4 f1 c& @ s2 f b% z; Fborder:1px dashed #000;
# U) J7 \5 O" t2 g% u# e" K H} x+ }! r0 J& G* t
-->
) ?9 B i) v1 S7 {6 X$ K4 [- y</style> ) g$ Q! P. X4 M* U' n
</head> 2 ^$ V& ]( y6 u" c; {& o
<body>
1 f, @; K% o; ]9 O3 {; d# w4 o<div id="pic">
' ^4 m/ E8 c8 J7 B<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " f. q0 x0 k3 f4 D% v
</div> ( |. M1 c# n9 ?2 s
</body>
9 _7 k C, v- G8 M, i5 _( n# ?2 k3 `</html> |
|
发表于 2007-12-8 14:55
| 