|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' \8 V) F3 H8 Q1 R0 j9 C( L- l关键在于：max-width:780px;以及下面那行。
& d- x* o5 R2 a8 y7 p ~' D7 f固定像素适应:
# e e& e! f" O4 Z) i
- {0 Y, Z& f' ?- ~) idotted; 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 C' H7 W# Z" t# I; o" d8 b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 {- x! q: ]6 z4 e: _
<html xmlns="http://www.w3.org/1999/xhtml";> ! a5 v& ~6 b/ h# t! S
<head>
$ R/ G, i2 J" g" a<meta http-equiv="Content-Type" c /> 5 K6 y/ _! k9 T- ^; Q* a8 k2 G
<title>css2.0 VS ie</title> 8 r( j0 H7 B& p4 {5 o$ M+ j
<style type="text/css"> 2 s: W- C$ _% }& p4 z/ L8 `
<!--
" Q( \2 D3 d. N* Q: n. _4 Rbody { 6 N O$ v' x: k3 }+ j
font-size: 12px; : D3 c! p- ?8 U" c. R% s4 z; b4 ^
text-align: center; 4 {0 M# q% k0 n2 n1 o( ?6 R
margin: 0px; * }4 l) s. `( s5 g9 d
padding: 0px; ; W, d' ?) g7 j, z# i
} ; ~3 X4 s5 K. [1 U2 N5 T
#pic{ + p, e" V" O1 q" o5 {
margin:0 auto;
* A8 o$ X. N5 {" S3 N) F9 m" h width:800px; 5 _) z7 E1 x! [+ y* L/ j- V } G% V
padding:0; + p& Z2 i+ X& |# |, D+ f: N
border:1px solid #333;
6 E+ n, l' X; {/ x } $ H* ~$ b% B( k1 R+ e6 d8 p
#pic img{
) h/ o) ]) J/ W- Z max-width:780px; ! ^2 J. w, G7 h
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 6 W0 ~- K& R, _' z& [
border:1px dashed #000; 3 V# ~" e' Y4 a
} & G; F& s' w3 W9 a g* f. W
--> ' R6 d: K- k/ o& A# a( t
</style>
( s# c8 z5 I' h# b: j</head> . ?, i. q. ?& a. ~2 o
<body> 0 ?( [, u; i9 A. H
<div id="pic">
: R/ }7 I6 T! e$ u<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * }$ W4 G% l' g- R: B- r& k
</div>
" B' l: l1 o# Y1 {</body>
% V4 _2 I9 }/ U9 a9 [+ ]$ \</html>
8 \9 e4 W# C7 i$ H1 l* Q. v& I; r2 O; E: l
百分比适应:5 d5 E6 }$ B" b
以下是引用片段：
( ^- i$ S3 @1 y2 [" C<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # j# t/ o: J; R/ S
<html xmlns="http://www.w3.org/1999/xhtml";>
8 f) D7 c9 c3 |6 J2 [; c<head> % \0 s/ x. s/ |- M) M- G4 C
<meta http-equiv="Content-Type" c />
1 O+ V. l5 R1 V/ J, w. H1 d7 J6 h<title>css2.0 VS ie</title>
. V. B, r9 I6 G Z G) ~0 m, v<style type="text/css">
7 |9 h% v# |- a* p, G' l7 p<!-- K8 Z( U, R% a/ w( {9 ]
body {
8 D! V: e, z2 w( w Y9 Efont-size: 12px;
# g, ^: U9 ^# atext-align: center; 3 Z6 }2 }7 w- F* V- v
margin: 0px;
1 T" o1 P& A* U3 @3 }padding: 0px; 4 l% f6 u- U: N. q
}
/ C. }+ t* I) V( Z$ y#pic{ 3 m! e" @' f. O/ c, t h$ Q
margin:0 auto; & e6 o* J/ Z2 I* a; q
width:800px; ; w e- I0 u* g/ I0 x ?9 }3 I6 }
padding:0; ! q2 d( b/ F) c6 G
border:1px solid #333;
* E: b& J+ u2 Y: k5 z } * Z- o5 t# o, ^8 |: h
#pic img{
0 Q: Z6 Q- _! I( p6 e max-width:780px;
, H F6 k( \, j- F: |9 }7 t" Uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " \9 [. r2 G6 X/ q+ a( N2 s9 H
border:1px dashed #000;
" M0 a, \- z3 D9 ]" {# G8 V8 c8 n}
! D0 [1 i! W% V-->
/ K; o! ]) r ^* d, l</style> $ T7 n9 x! g; ^6 G% w
</head> 5 R. m6 ]0 L3 A8 ~) z
<body>
4 _$ s8 } P& a<div id="pic">
+ A2 T/ {6 I% M0 G<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 `. s' n$ ]- [( @/ C" ?</div>
) |& q6 I- A+ R6 o, z7 q, E3 t</body>
2 x8 c; d3 d7 [+ z" V+ t</html> |
|
发表于 2007-12-8 14:55
| 