|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14395
- 金币
- 2483
- 威望
- 1647
- 贡献
- 1431
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! N! [& L1 j! ^) d' m, I' k关键在于：max-width:780px;以及下面那行。
! A0 @5 z) g6 t! T+ Z# S, w固定像素适应:# A! N0 {# Q. i" g
! s+ p/ E. J6 Y3 y2 J) ^% u
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> 以下是引用片段：
8 J! S2 s1 `$ z; F* E<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 O4 ~. Z# {$ V$ W. @5 w
<html xmlns="http://www.w3.org/1999/xhtml";> & Q8 y$ n3 @4 a* f% u3 ?
<head> ; R8 I; C7 g: w9 D, f, H6 x
<meta http-equiv="Content-Type" c />
: p) i& G% M( p. D$ n( F<title>css2.0 VS ie</title> ~- K; n5 C8 V
<style type="text/css">
9 D; k" W( O$ S6 e<!--
4 U( G% ]) @) D5 d' H* b, H- Pbody {
, ]" F; s) P0 b; l8 l% W4 Z* Lfont-size: 12px; " G/ w, n1 A2 H0 |9 W. B5 F
text-align: center;
; d7 O' y; G8 B; wmargin: 0px; ' e; }1 p7 ~5 z& b2 a8 V
padding: 0px;
, ^4 D& J8 M& F1 z2 ?9 f% _1 _}
3 s2 N& j( X( ?' F! X#pic{ 3 E/ q; ]* i% X- |, ^$ m5 }
margin:0 auto; ) i) {- m2 B1 Q9 g( \: k5 I. b- e5 g9 q: d
width:800px;
$ y$ u2 ]' A! ?# C, a3 b2 J3 S9 d padding:0;
% a8 I1 g" x' L. x7 [2 D: M/ p- h. k! j border:1px solid #333;
/ E: \$ ?9 s7 t+ w+ N/ N6 f$ D }
: e) S& Q8 O5 ]" S! B& ]#pic img{ 3 o3 X: f, o( p& U2 Y* G
max-width:780px; ( _: F" @" n/ c
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# j0 [! s; k- H7 ~0 c' oborder:1px dashed #000; ( W$ C! ?3 `* Y5 w9 K4 @( [
} % _! V' d' U: Y0 T$ Z I/ s. s
-->
' I( l) w$ s5 ^& f) O6 q</style>
+ _( ~/ D- S* @5 Y: Y( k7 |</head>
- j( M) r% s h<body> 6 j3 V8 _& O& d; v
<div id="pic">
) O i8 N& w- R% D# y- X<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 s! S6 u! l$ I: B2 O
</div> , t" K6 b' d. U. n2 z( ~3 F
</body>
" s: \# m- S5 ^1 e! D, t</html>
; q0 a7 J8 R9 Z: \7 }7 z0 M" v% c; n
$ m+ `. i4 u2 l2 {6 e x; Q百分比适应:
# q$ n) r( p) m! d6 b" z% K( I以下是引用片段：
8 F# N0 ^( d, o/ ~, }- b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& r0 A `) m- l( U9 B: y- }0 F) }<html xmlns="http://www.w3.org/1999/xhtml";>
% J% J) y' e0 u m/ Z3 }- f<head> * U& n9 b5 X* t; i- e8 J
<meta http-equiv="Content-Type" c />
! f" A9 Y q7 l$ I9 o. m$ S<title>css2.0 VS ie</title>
. d- Z- A2 R2 M1 s; t6 {4 b+ w% k<style type="text/css"> - E. E* s, p( Z9 m0 O0 @( l( I
<!-- / o( h/ Z2 v$ Q0 `! L
body {
( z& G' R8 z" f* |2 hfont-size: 12px; % ^; z4 V! R2 ? f
text-align: center;
; h3 q; Z, u/ Y) n. Z7 C; c0 Qmargin: 0px; ' v$ H3 c8 Y* \7 y& F; \0 i
padding: 0px; : e7 s. _1 D+ _- \
} + j* L7 \- q* A6 u
#pic{ " l1 O" O w: {* `. {
margin:0 auto; " o$ S I6 d' A2 o$ F5 a
width:800px;
( y/ T! n W; j! b; u2 O padding:0; - y4 j+ o# I5 R2 O7 k" e4 ~
border:1px solid #333;
, _) K3 }6 v, M# \" M }
1 `7 L C1 q R3 Y/ i2 Z: W#pic img{ ! j. J5 n; Z+ [ z
max-width:780px; 6 \( C8 I2 n8 d) b# B
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 7 Y, T9 H, X. L) U- C8 v' U
border:1px dashed #000;
+ Y# I: m; X1 w. q& w! P/ g/ R}
9 Q0 L3 E: S1 F0 h/ p. C' s& m--> 0 @' i: \8 y4 v; b$ c; U
</style> / j" V( A! }& T& c# p
</head>
1 y6 N; N m5 A; x0 U6 B+ d<body> ' R8 o( Z9 b* m9 A# t1 M/ `# I
<div id="pic"> ) Q' i2 O/ d+ }$ ]6 W) H1 O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 I- X& h& v& g2 N: y
</div> 7 r% L2 p1 o. M
</body> ' t) |7 Q- |0 D" {% n
</html> |
|
发表于 2007-12-8 14:55
| 