|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。$ C3 f; ] f5 x# L2 }7 _6 k* F3 \
关键在于：max-width:780px;以及下面那行。
) I! ?0 {5 h8 p固定像素适应:
- p1 D' p# j& q
/ J5 S+ o2 X. D3 z; u( |6 Jdotted; 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> 以下是引用片段：
7 |8 K+ f& r0 O: c8 O, y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* D" ^/ L3 Y$ I% m3 r/ X1 x<html xmlns="http://www.w3.org/1999/xhtml";>
; t$ w' p! t- {5 i<head>
% n0 k- V! K P! Q9 o7 g$ B9 E7 v6 E<meta http-equiv="Content-Type" c /> % m w3 B: d0 A+ x$ C
<title>css2.0 VS ie</title>
/ H6 k8 L Q% Q! B8 [6 H<style type="text/css">
$ R# \) X/ g, Q. \5 j/ N<!--
1 K B! p- R9 {8 }2 {" |; q* Pbody { 8 {. O8 V! u9 L& l: k/ [$ c
font-size: 12px; / U0 ?9 r2 h0 D" W3 K3 V" A% J
text-align: center; $ H1 Q( q/ I: n/ k3 p
margin: 0px;
; Q6 V* H+ E$ w5 P& Opadding: 0px;
X4 n- F# y* T! ], G) g Q} ) J7 ] e% R A' ^
#pic{ & Q+ a0 a: ?. t4 A1 g
margin:0 auto;
7 N @1 z6 D# W0 w; I: e width:800px;
# V* n8 Q( C. o padding:0; ' Q4 M+ E6 C7 A0 z% G) v
border:1px solid #333; ; Q* I' @* H% q S- S ]
} + p1 E3 k: B" V; n
#pic img{ E6 B& @, B/ u
max-width:780px;
, n' E! p# r4 H7 I# ^) ^4 owidth:expression(document.body.clientWidth > 780? "780px": "auto" ); : w. u4 b8 u* }. `) K- [: I1 j% C! }
border:1px dashed #000;
7 c% i# x3 W7 b6 C" { T}
' [" H/ s% |% Z4 e--> ' q+ K, A. q# w! B8 b( M
</style>
* S. H+ `2 U4 `, C0 l</head> 8 l) ~: S0 P' u0 f% Z- d" T
<body>
. ]* [9 ]- G- f) O6 r4 j<div id="pic">
0 O% {4 T5 \2 W& S- t+ y/ q" C<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- S$ L5 y5 K' q; u8 X& @$ v</div>
; u2 ~! Z w- \5 m: T* }</body>
4 J# z5 ^. i( r; N$ l</html> 7 A( m2 Z( v/ s+ R# S: q! `
$ U! t W- w, q/ ~0 v# m
百分比适应:& z' y3 E0 J5 @- @* p
以下是引用片段：+ K: s! D" S* Y2 ]- N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / `; U1 ~+ Y2 {) K
<html xmlns="http://www.w3.org/1999/xhtml";>
6 @8 ?9 u, Z+ x1 F. {! f5 a+ Q<head>
* K) @$ ^& R4 g( s5 m<meta http-equiv="Content-Type" c /> # ^4 D- b+ d! N. `% w: I) x5 _
<title>css2.0 VS ie</title> ) c) E) D8 O8 c
<style type="text/css"> 6 `7 w7 ~, Q" x: {
<!--
+ e" g! i8 i$ E" b p5 i; c, J5 ]body { ; u& D# z: A* z( S6 m: E
font-size: 12px;
) L7 O4 l. Z8 e& ltext-align: center; 8 Y W0 V' B5 p. c+ l5 b" f; }
margin: 0px; 6 q1 [/ l$ J1 w" R' h" ^! p2 j2 W1 T
padding: 0px;
4 Z- p& {; N" m; ] N6 O0 l6 t} : i+ u- ^8 I: c) b% I4 Z
#pic{
1 v. |+ S) \8 {. [ margin:0 auto;
9 f+ |- {1 V! T* @3 l width:800px; 2 H$ S" o1 d2 `0 C
padding:0; , @+ p$ J$ K1 m. v5 F7 Q
border:1px solid #333;
* p5 L, _0 ^5 a. {# k* X, h } ) ^) [4 I) {+ F, N \& K
#pic img{
! E- O0 W3 }1 w- L: p max-width:780px;
. u; Z8 H5 d2 L! [9 u" z; Ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); * D6 S; i8 K) K# ~5 }1 |) O
border:1px dashed #000; & o5 X% I6 J) h2 t2 r
} + P2 |1 X( ]( f. T* h( m
--> $ u6 Q/ J4 _" p% {
</style> 7 s, ?, P# ?) i& W3 [1 e4 T
</head>
# ~2 ?! o9 M: `$ Y% k<body> $ c4 R C0 m! N' {/ Q" d4 O
<div id="pic">
* d7 v1 t1 W7 |; F- V<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; w C" B7 d/ }8 K1 B0 Q3 @6 E
</div> . S. R) \- G$ c. l' K
</body>
+ k$ u3 A2 R2 I6 T$ [4 e</html> |
|
发表于 2007-12-8 14:55
| 