|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14373
- 金币
- 2472
- 威望
- 1647
- 贡献
- 1420
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 r: u" }/ J' t关键在于：max-width:780px;以及下面那行。
- f8 r D8 b: v5 D9 A: J' h固定像素适应:! o9 R9 U) X8 l0 ~3 a, U6 g8 `
7 i: V- ]" w$ z" z8 fdotted; 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> 以下是引用片段：' j4 \1 `2 D K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 Q2 z9 q5 d2 c# d$ o. E |) m<html xmlns="http://www.w3.org/1999/xhtml";>
T" J' g# z+ ]; s/ K<head>
/ u7 P: m, X( L% j! ^2 G<meta http-equiv="Content-Type" c />
7 R4 o7 s6 m" D5 V }<title>css2.0 VS ie</title>
$ c4 H3 y- n: J, P( ~# K<style type="text/css"> 4 f; c! a0 m6 ^/ n
<!-- 8 M' b5 G& k( ]8 H
body {
" L# W- H1 A/ N8 Ifont-size: 12px; . t& w% B2 f1 r+ }1 S6 \6 |
text-align: center; 1 X% |4 P3 \# f, S+ }8 ?
margin: 0px;
, A' y' M6 c7 Jpadding: 0px; % V$ Q8 f( I6 \" z( f& Y1 b
} / e! A) g6 l/ K+ b" U6 l0 x
#pic{
% H( H6 ] t7 |# z margin:0 auto;
7 k$ Z3 A$ t4 `+ V6 d width:800px; . e$ T) `* Z& g& u2 b
padding:0;
* f/ k9 N0 b8 x. D border:1px solid #333; . q& G4 _! M9 ]" T( v
}
. ^4 u& t% }. S; B, I2 P#pic img{
# T0 k* F7 O% w( D8 ] max-width:780px;
. T9 Y" a( [5 t/ Gwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
: N# T( M8 y0 E. M! Hborder:1px dashed #000; T; B3 }6 @ w7 L, c9 p6 C- B
}
& p k/ d/ I) t0 ?--> R6 U8 {$ Q& |
</style> 4 d9 \( l1 h( L6 C( R
</head> 0 ~8 V p1 G8 X% U) X) f
<body>
' T. i8 n3 E' v- Z u3 k3 S, L+ }<div id="pic">
0 n) b* Z' H+ H<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 l! z- K6 p7 O- k# h' a
</div> ' l5 b8 S0 ?- J- v7 O. {5 M
</body>
3 b6 ?% X7 H, H% ^' R- u4 X</html> # c! }. P: J2 }, @; `& r" O: m+ n x
5 x1 H5 I/ A; y- T+ d; Y百分比适应:! B( V6 _. I7 p* Z
以下是引用片段：; M- M" c0 q9 V( o, y3 i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 B* B- y T, k6 x1 ^+ |
<html xmlns="http://www.w3.org/1999/xhtml";>
6 d5 C' z; p Y- S- l* y; t<head>
! V: |; b+ J' }- J<meta http-equiv="Content-Type" c /> 1 h4 ~$ ]8 w3 L( h& s: `
<title>css2.0 VS ie</title>
' U/ e+ r: P& c/ k9 Z<style type="text/css">
9 f/ h" I7 T+ h6 i1 K' Y7 C<!-- ) I0 v6 J+ _9 L2 U0 z
body {
8 f- A8 e+ K9 x; W# F @font-size: 12px;
6 W5 F1 c4 F" ptext-align: center; }4 |) s2 @! }) t& D+ |* V
margin: 0px; 1 C0 D+ l) f9 u- s1 O
padding: 0px;
* G2 O3 r: ]6 x6 H' t}
7 `$ B! u, u8 e: F) S#pic{
; K6 S$ f$ u/ `6 {& \ margin:0 auto; 9 f" L) w; L) {* d" O" [
width:800px;
0 k$ u7 V/ L6 q6 j" }( e padding:0; ; U# f$ W( J& D2 i0 B. L
border:1px solid #333; 4 {; e* v; ]+ \
} `" ]0 W, t/ x- K: R) A- F
#pic img{
5 Q: c0 G( j h8 O4 T- \7 B3 [ max-width:780px; ( X* d g! [, e' _" ]5 w& H
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 R7 [6 g! J% j; L- mborder:1px dashed #000;
, |* f# K0 R- W6 j" ]# p} 4 K! G) i8 F8 \/ J7 r
-->
9 J C& j$ D* f</style>
' r6 I$ K! w5 @' R; G9 Z8 `( ^. f</head> 1 j \5 H% C8 N# ^' r. V6 S
<body>
5 \+ C) K$ W* R' w4 r<div id="pic">
- [) r$ s/ c. ~$ i* T7 J<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( ^3 \9 n# ?% c# f! f9 @3 C
</div> , V* D9 T( y2 X( @0 `, N$ x/ @% x
</body>
& M8 l8 S0 z# h: U</html> |
|
发表于 2007-12-8 14:55
| 