|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。: S9 O. a( E4 G4 {* i
关键在于：max-width:780px;以及下面那行。
4 O- Y ~' e' `9 _0 n; h固定像素适应:
. t7 W* _9 R0 H, f2 v8 F5 Z/ f4 E. I5 G, N
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> 以下是引用片段：
4 j: m0 ]8 U) T' Q9 B9 ^0 J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, J' X7 A* w9 r' G; i1 ~$ ]& Z<html xmlns="http://www.w3.org/1999/xhtml";>
2 {/ b7 ~4 K/ g* l8 ]<head> , R* u8 B q# ?7 B9 B$ \, Q
<meta http-equiv="Content-Type" c />
8 z, G2 U8 d9 B& f/ O |6 T- V<title>css2.0 VS ie</title> 4 Z# G$ `8 [1 m0 [. q# `* z! X
<style type="text/css">
2 b) E$ V. \; O' C<!--
$ G2 S" E' Z/ n& @8 C- rbody {
& r9 c% L& m; h4 v* K0 _$ `0 ]font-size: 12px; 7 f6 a: l3 b/ T& w+ x
text-align: center; ( v k. l" s' N) t2 j
margin: 0px; 7 e0 @0 f$ U+ `4 B; [
padding: 0px;
; y8 p% r% {: m' q: X} $ Z" ~' P- M! g4 N: A, m5 L
#pic{ 8 g4 |1 d, a2 |5 `3 j B6 m
margin:0 auto; 1 b4 |* k( E+ M2 Q$ X- n- W
width:800px; 5 h# u% D; Z; h( C/ r
padding:0;
; K# N& k* K8 D1 K border:1px solid #333; * C/ G) Y2 Z/ U5 e- D7 q
}
7 c2 x- W F2 C1 F7 x) l1 b3 j% w#pic img{ : G% H/ B% G' C) J2 q: k) j
max-width:780px;
+ l, i0 K# \; E% A5 {, twidth:expression(document.body.clientWidth > 780? "780px": "auto" );
) A) D+ Y4 J8 f! D$ X5 k; mborder:1px dashed #000;
8 `5 p5 ?% o- [) @( W' T}
9 T, i/ i; V! k& p8 _ W* J--> ( b( F4 r' @% }4 q5 J
</style>
, V9 o- U+ G5 @5 Q</head> # k) y' A0 i" s/ G, N
<body> 0 y4 z1 R" F" a: K, G2 [
<div id="pic">
' [( n% ~/ N6 _+ w+ {+ }<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! L- I6 j: g T5 r
</div> 5 T1 x) o4 m/ j# q; V9 O
</body> ; d2 {" `$ O% i" V8 q* K
</html> * b( m" X1 J9 v6 X. h" q
3 @7 O& q1 M6 d2 G5 h3 p百分比适应:/ W3 h: O* ]+ @, d
以下是引用片段：1 s) z0 \* N: x% G0 G) T9 B, h9 j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 _2 E' W: I+ U' }
<html xmlns="http://www.w3.org/1999/xhtml";> / [' L. V7 n& y- a6 u
<head> , ?0 T. ?! Y' a. f1 G: u) |
<meta http-equiv="Content-Type" c /> % b7 z9 K) w, V3 w3 b
<title>css2.0 VS ie</title> , N3 n) t* _, ^4 m8 R" L. O# x
<style type="text/css"> ' g& a6 {7 J* m4 F b# a
<!-- 5 C5 _8 i% L# s3 Q" k
body { 0 u. B! ^) Y$ p9 A3 B; {
font-size: 12px;
8 h7 F' H) ~' F1 r ]. Ttext-align: center;
% E+ U* \4 B# `: Z# r2 f' fmargin: 0px; - S! l( p: w X: A4 v6 l: x1 d4 l
padding: 0px; * m# x C; i, m9 ]
}
; G% a0 `4 p2 _4 b! `# R#pic{
% B1 p; m! R! D/ k6 s/ w" i/ b+ I margin:0 auto; ; a* Y7 Q) @/ ^: x. Z/ X2 C; R! O8 @
width:800px;
& }+ J- u1 E$ R8 v padding:0;
/ V! o: Z# n; {: a6 C border:1px solid #333; v% @- {/ Y6 t9 V6 v4 F& ?
}
8 \, m" M( ]' {#pic img{ ; \ N. N+ p) Y5 Y' J9 Y: q% ~2 o
max-width:780px;
' s- F0 h7 e1 h; Y( Swidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 X8 S5 `1 |4 z; l8 u$ L2 Y, P8 M
border:1px dashed #000; 0 l; Y; H1 G1 Q; d. z
} ' y3 t# ^5 B. M' o6 n! v, _6 X
--> 3 }, c9 j1 y$ Z
</style> # k2 I8 }. E; R
</head>
7 J) X, P* s) r( I3 r, j6 Z9 F8 b<body>
Q2 b1 v; ^- x) c* u<div id="pic">
0 n: L. H' ^: V# D% h% l* `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- E- |& _$ }6 K$ d* ]) v</div>
* j8 e" |. R& z2 Y/ a2 G# z</body> 0 y( n. r# l6 l3 `8 R/ S" G
</html> |
|
发表于 2007-12-8 14:55
| 