|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- M% Y" a5 Q5 t9 L3 j关键在于：max-width:780px;以及下面那行。
* b4 m9 P0 |) r$ y( _, S固定像素适应:) S: q* x! J/ i4 C- Z
) P, m# k) j3 C0 N8 C5 Vdotted; 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> 以下是引用片段：. w* r J7 K% c6 p" }0 D; V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 ]* O0 ?5 t# B7 U5 V" Z
<html xmlns="http://www.w3.org/1999/xhtml";>
5 I7 J4 M3 Z4 V* ^. ?5 M9 f<head>
0 f' F! j1 J' j: r: J: ^4 ^<meta http-equiv="Content-Type" c /> 2 h: m5 A* M3 t+ m P! h
<title>css2.0 VS ie</title> " U) a4 H# U7 a2 `; [: y0 g& T; R
<style type="text/css">
- j2 K( P! n2 @1 z3 _1 \- x( U<!-- & k6 V q- o" F6 R% k! P4 i5 B
body {
0 [ d$ v7 d ^font-size: 12px; - L6 J: F E0 P; N1 c
text-align: center; 9 b1 ?7 F" L! M5 O, C! g- p
margin: 0px; 5 v; j0 |% K* W: L' f6 c/ |
padding: 0px;
% m4 L$ M# q& [( t" f. Z `}
P' J! ^- g) @ \ K* p#pic{ 4 z/ q! M$ b9 J9 z0 f. y0 k! G% ?
margin:0 auto;
) h' c! `7 }. z( e" d( i width:800px; ^8 y$ i' ~- a9 F7 _
padding:0;
2 R$ _+ Q) ?5 i6 b2 o. S" y border:1px solid #333;
- r! g& e. n& Z }
+ J# b" [9 a/ m) J+ M1 E+ n#pic img{ & L0 o. O! s" d! s
max-width:780px;
; [3 Y9 W$ j3 g5 `. }! _width:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 W2 z/ p& y. z4 v4 G' u& _& M
border:1px dashed #000;
' X8 m; @9 J" q, v- M0 ]7 q z}
% D5 e# K( j% d) X$ m, B" L--> 2 w1 Z" z1 q3 W
</style>
/ U7 s& c1 R( ^& p: e</head> 1 K. o/ j) M* q0 ?1 G7 K
<body>
T7 E! Y; E2 F* H$ g2 W: l+ H<div id="pic">
- S t* g R* J$ ?; Q) P( z; _# e$ G4 ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . A! K2 B$ z/ \1 G" |% w
</div>
+ u! z. Y9 Q5 ~</body> # _: g0 x, e( M; ]
</html>
3 w7 ?6 M( k- Q. H; Q% E
; u( J5 q. z$ h3 W. d百分比适应:
: \6 H, t; r" Y5 d( V9 y3 N以下是引用片段：/ Q3 U |. V z& H9 a- E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ U3 C4 o+ i% Z7 Z<html xmlns="http://www.w3.org/1999/xhtml";>
1 w M% _% \8 l& ^3 ^; W<head>
2 ^5 s0 p0 j/ F; m* c8 X( Q" k<meta http-equiv="Content-Type" c />
$ h# X) P/ b. H* y4 D<title>css2.0 VS ie</title>
8 Q2 c- R0 H" F4 |" L<style type="text/css"> . W* B# a0 h" E/ @$ x, f
<!--
# V& @: `$ b. g1 Z: W U3 [body { 6 T: X- e9 g4 V8 {$ V$ C8 |
font-size: 12px;
' ^4 _4 q& I9 ]4 B3 ?. Z% U& Otext-align: center;
6 x$ u0 K/ ~. i2 `) @: w* D! ~margin: 0px; 3 U, [& S" B( b. N8 B8 F( Q
padding: 0px;
# ]+ t. \2 W# Y9 ]5 n6 J$ s9 _} 5 p5 W* ^% z4 ]8 u) j
#pic{ : n3 U! ?4 }5 I
margin:0 auto;
. n2 f; c* f; [* w: L# X width:800px;
1 N' j' l7 S5 Y a$ x/ d! u# A. K padding:0; 7 |( `% ]+ s: B' A
border:1px solid #333; 4 m. q! l! D2 b
}
0 K* E7 I" K3 ]6 w, F5 j; n2 U#pic img{ ) C, K" _9 y/ I7 E3 x/ m' [4 \: k# I
max-width:780px;
: y/ F: m" N. O/ L5 B7 o% rwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ) K3 X4 h/ `7 E! q7 x
border:1px dashed #000;
& K9 T0 E! f+ H4 Z& s7 r& j- J}
" ^2 m( G' s' b--> ; N- ]( Q' L* l" s% G3 M3 L5 D# F
</style>
" y" q" @! F# L! L7 d( ^) N</head> % _) |- f. H7 n4 F" D/ V! k
<body>
) m% s2 t$ `! j: H<div id="pic">
1 W) L" y+ ]. X2 N<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) Y9 s. n' w' \# ?0 T
</div>
+ q6 D4 D; x! Z- Y' H- V</body> 3 ?' C3 v7 ~9 y$ g, C* t$ w* ^: \
</html> |
|
发表于 2007-12-8 14:55
| 