|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 t1 _% u! f" f+ d关键在于：max-width:780px;以及下面那行。
' J# j. w; u* z2 D; q固定像素适应:, w2 ^7 Q G4 Q+ M2 [
3 ]& ^$ u5 V; Rdotted; 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> 以下是引用片段：4 Y( Y1 p" S' a$ F$ ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . \' M( P8 N6 p/ g( O
<html xmlns="http://www.w3.org/1999/xhtml";> * F$ i( Z: u0 c7 h1 }
<head> 0 ?4 t' L7 R2 z) F1 J
<meta http-equiv="Content-Type" c />
0 b6 O" y, V8 s* N- u: U<title>css2.0 VS ie</title>
9 _ t. q4 B* R4 h8 _0 F$ _4 ]" O3 w! O<style type="text/css"> / a0 p" J6 n5 b K& ]8 j9 [
<!--
) [" j6 |8 {* obody {
" g# n' d; ~$ c4 U2 u5 F. X9 ]1 afont-size: 12px;
+ R$ x8 P4 [ k( E2 wtext-align: center; $ z/ V* ?) a. A
margin: 0px;
7 [' d1 F+ Z6 H) L7 K5 dpadding: 0px;
3 c5 y/ ~/ w8 S) T( Y} 6 i0 W( N; T! v B/ b2 Z" I
#pic{
$ `) B5 r, [1 ^# h) x1 w) K margin:0 auto;
6 a7 ^$ W" R4 d% r3 \' l width:800px; , v) C9 w7 V: H' l+ ~ q) r/ i
padding:0;
& ^2 `/ j; }6 x; N border:1px solid #333; : i' k( L" a. G9 b7 d1 [! I6 J
}
8 |' M/ u E+ y+ e" A+ j" m#pic img{ - o' z) ?. g! g) H9 Z
max-width:780px; * { x. t+ O$ u( L$ u5 C
width:expression(document.body.clientWidth > 780? "780px": "auto" ); # A( v# M) u9 P
border:1px dashed #000; 4 g; W! ~9 L3 |% B+ E7 q5 Z7 Q6 {
} ; K# B" o6 D3 C" k8 c/ c7 r3 ^2 B0 z
--> , N5 ?' s- \* j9 I
</style> & l2 o# i6 l N) A
</head>
/ E; z) }0 C! d2 l6 v<body> # o% {: z" s% B3 I% j9 R8 Q7 I5 G
<div id="pic">
9 ~1 r: p( D' k* X. H6 \<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 ^" W) ~: {0 | Z c" |9 t; e</div>
7 d4 }0 T# E+ i& u; H</body>
& \0 [! q7 I- N# }( T) ~$ D# |</html> % H0 O2 a' k6 ]7 U" |' {
, I3 \" L# i2 u百分比适应:
, U1 S) j/ E1 g; R* |. J* U以下是引用片段：
6 [' A7 }$ ]* z; F# ^) x3 ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 I: H2 n" W/ F) z( A
<html xmlns="http://www.w3.org/1999/xhtml";>
- ?" V$ u [# R' ^0 o9 g E- ~<head>
' j) N& z) o8 n) `<meta http-equiv="Content-Type" c /> 6 h) S4 M( j i% w2 \& Z9 v
<title>css2.0 VS ie</title> 4 p$ M! O7 @5 n' C
<style type="text/css">
& e3 q! U5 k8 R8 D5 ]1 w# Z% X+ H$ {) }<!-- 5 e' [. `$ m- K6 k
body { " }/ W' X0 V; r8 w5 J
font-size: 12px;
5 ~1 a4 J4 p. J9 W; [$ \text-align: center;
. I; O Z9 t/ rmargin: 0px;
. p7 _, P5 w1 k% d' wpadding: 0px; # i% t' [; O$ X# O
} 3 I, \7 V+ v4 _5 _
#pic{
9 x5 \5 U& T5 M7 @5 t( ?+ G, `9 T' D margin:0 auto; + Z5 m* V1 `2 p( V
width:800px; : ]9 U! W; I8 X L0 k- g! o* ]4 H
padding:0;
" Y) ^6 u" T& K" B& @ border:1px solid #333; ( u4 f. M2 o9 C4 |5 k
}
- J' X2 u+ ?) l# ]& S7 z& i8 \#pic img{
& {9 R; O3 U5 v, F; D& G max-width:780px; . i) O+ X. C v( L* z! }
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 E. b: c1 _# h. l1 xborder:1px dashed #000;
7 }* v9 Q* i: J8 [% Z0 M+ \' G} 8 G1 r7 i/ i9 p8 R7 v. {2 J
--> ; u+ S$ N* b( S3 P% k+ P/ |
</style>
. O0 c: b1 ] l; k</head>
/ l* `9 ^: S' ?<body>
1 [/ P6 e3 f# _<div id="pic"> 7 L7 `" w4 ~* r5 O7 i6 u! O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 K6 }% l/ B! o: T( J* h
</div> " O0 p% ~. c- t5 b4 e s# n- b
</body> + P5 R! d6 I- m& H4 S
</html> |
|
发表于 2007-12-8 14:55
| 