|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14249
- 金币
- 2415
- 威望
- 1647
- 贡献
- 1363
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 a" O) |: y; u1 b: K7 a; P9 ]
关键在于：max-width:780px;以及下面那行。
4 t. Z( C7 V! K- v0 E/ i( w固定像素适应:
( L1 l( p. N+ P& e2 ]( ~
& v+ B, \( K' l. adotted; 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> 以下是引用片段：6 } I! d# T# E# E4 b% v2 a5 F# Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 o" k0 U" @& G# L- @8 j6 o0 Z7 v
<html xmlns="http://www.w3.org/1999/xhtml";> " X! V/ j6 S* K0 l8 s
<head> , l* j+ r# N9 t) s
<meta http-equiv="Content-Type" c />
3 s1 L3 m4 j0 ~+ B2 V f! g+ |9 z<title>css2.0 VS ie</title>
$ V# h, {' N- E3 ]- i. B<style type="text/css"> ) I1 w/ Q) b) C; h( y; \
<!--
6 R$ _1 r) I3 c2 i7 a! @, Pbody { ( o+ Z; ^' |; u- ^" y: S# Q
font-size: 12px;
# p( `4 Y8 C4 g- [3 C: [text-align: center;
* O5 b0 @5 \8 @+ p2 F2 Kmargin: 0px; ; g# |# p1 N/ z' e
padding: 0px; , Z3 i1 I: [5 O6 \; D8 x; x
} : M9 c; B- j2 M) U
#pic{ % T4 L, Y$ P x7 ?1 m
margin:0 auto; ) W) q' I# @9 t& ^3 `
width:800px; - M' j" b# a" i* L- y
padding:0;
; p' R8 U4 R/ G% C b( D) i& x border:1px solid #333;
7 R4 A3 `. v5 V6 F+ [ }
: [. ` M% {: C5 [# T#pic img{ p6 Z& g9 ^/ i$ k* y7 E! @. c
max-width:780px; 9 ?8 v$ e3 z7 v
width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 ?3 F' F- V$ [. k( bborder:1px dashed #000; 8 q# @; U7 \7 x3 a: B, ]; [$ r
}
' W5 c5 e- L9 J8 O$ n7 p--> + x) I+ h* g" X2 \
</style>
/ s; ~2 [, F; N% C! q</head>
- ]5 J+ e7 x' b5 i+ C% l<body>
( y- h5 J6 X0 S. q. Z$ R' y<div id="pic">
1 j4 _1 a) F* ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& a( T; k; S7 s3 d</div> $ P2 W3 X6 ]6 H* |- [3 B8 s* @
</body> # F" N, a8 d1 o
</html> , P* `' }& i$ _ h7 D3 t- W) |
/ D/ z/ f3 ~) e! T4 e" {- E# z: t百分比适应:6 u9 D/ S' l9 p3 P3 x
以下是引用片段：
- y( N/ D. S C4 x# I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 ?* Q9 _, V! _4 v( ^
<html xmlns="http://www.w3.org/1999/xhtml";> 0 ^& p! C# P; ^1 o' L
<head> ) s0 {) f# ]! T
<meta http-equiv="Content-Type" c />
* I( d% _; I& L' u5 v/ u! ^* Q# p+ ~<title>css2.0 VS ie</title>
! ]; g" U: e# _- b" I$ R<style type="text/css">
' [+ @: r6 t/ |- j f r<!-- / u8 w0 q( ~6 E: _# |* @- B
body {
' r4 L! Q+ Z, Y- ffont-size: 12px; ) l& g* Q5 V/ E& \! |
text-align: center;
% {. ?5 ^; t0 R7 w1 bmargin: 0px;
- x( R, s0 V r Epadding: 0px; ; m7 g/ n9 |( X- {
} ; B: X1 @; r# R
#pic{
5 k1 R" F. u. X9 z margin:0 auto; 6 i# A2 R( q0 ^6 Q
width:800px; ' k: J6 K( V X" j
padding:0; 9 i! y; s" T4 S' _* U& m; t
border:1px solid #333;
. s* Z# e) j: Z5 L1 A }
9 Y+ \% ^- p8 ]0 Q- D; P5 K5 t3 A#pic img{
# D, z: u3 V6 |; p" I7 I! M max-width:780px;
7 h; e, E; ^0 j5 { k) w% O) F5 ]width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : I# u; p U; y9 s, e" n3 Y
border:1px dashed #000;
+ q: F- t5 g2 \8 W+ g- m8 @} & d6 E1 G J: _) D
-->
5 e o M( B8 B. S/ }, A( r- u8 B' G</style> ' i( s0 d) }" Y, }) I5 S9 t
</head>
. ]) C* t* Z$ t0 z7 d6 i8 g<body> 0 Q) H' O/ f6 u1 S9 m* R }$ y3 d" [
<div id="pic"> " x6 S8 \# J; m
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 W P0 t. N3 |- j* f; ]4 |
</div> , X5 c. @! f. l) @, t6 U
</body> 1 o2 }1 j+ r) J
</html> |
|
发表于 2007-12-8 14:55
| 