|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14377
- 金币
- 2474
- 威望
- 1647
- 贡献
- 1422
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: ?7 I+ {* Q6 z2 X) ^5 f. x关键在于：max-width:780px;以及下面那行。; k- ~/ M( H m
固定像素适应:
$ ~ i+ D3 O9 C# e5 o: M
, Y$ x: M& \0 u4 vdotted; 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> 以下是引用片段：+ _# |% L, s6 e4 y) s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - ^ c$ J4 }- `$ H7 o- Y2 N3 m
<html xmlns="http://www.w3.org/1999/xhtml";>
) `& B; }8 m% q& p; [<head>
, z# X6 H, R0 R<meta http-equiv="Content-Type" c /> & u4 P% ?- v1 \4 d) G
<title>css2.0 VS ie</title>
5 T- W( \( D k$ C' ]0 p<style type="text/css"> 0 r' b) G5 z k7 n
<!-- 0 q+ x* L+ J& u5 D5 S) ~ \
body {
D: a, h( Z/ X) B6 Mfont-size: 12px;
' @4 K* W; r# T3 ?; ]3 c9 C" etext-align: center;
/ E" W) g! t, A8 T5 Umargin: 0px; ! N- z6 h s1 X0 n
padding: 0px;
- X( q% h0 t* k! R. f} 5 Z3 `: b4 n; O0 Q
#pic{ * c D: C4 z) e. m1 `
margin:0 auto; $ N% `% K% L4 l5 B+ C+ m& K1 o$ j' j6 Q
width:800px; ' f2 l) A3 Z, M; F- m0 c! q
padding:0;
. i5 S9 A2 r8 e' I, p border:1px solid #333; : H' `. g% m& Z0 b9 j! L
} . l. D* Q0 I6 U" F. ?
#pic img{
- u& G$ U/ X" l! `: v& v1 a max-width:780px;
h- ` n2 h4 p r* W4 Lwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); . m8 `% G. S) C- H! t! K% e+ M; _
border:1px dashed #000; $ q) r% m, I' _ x) G! ~% d
}
( f3 l( T! J: k. _1 r( g! U8 c--> + p+ ~6 Q$ F0 g/ P9 T8 o
</style>
/ U5 R" k3 |6 @+ Q: _</head>
' e% C# d* q- ~ j% h: _<body>
7 C8 z+ x! q! ?, j( X7 Y* D<div id="pic">
& ?8 k A* J) {<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - q7 s9 Y% B% d! C0 K6 g5 j. T( e
</div> 6 X, S Q6 | {5 t% \
</body> + x7 o8 W3 }2 f. y$ i
</html>
8 s! ^: [/ a! e# J% o3 O) N
8 k S+ K: d! s( n8 }6 t百分比适应:
% Z5 ?+ ?; _' W* @& w" R以下是引用片段：
, D* ?6 Y9 |% S$ g4 d9 b9 p<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- ^, k9 m9 w) D: X* i5 x9 ]5 b: e<html xmlns="http://www.w3.org/1999/xhtml";> G$ A8 H" c: `" [
<head> : v7 D( m- h. {# n, l5 P2 O# }
<meta http-equiv="Content-Type" c /> 6 q1 @1 n3 X5 l- V
<title>css2.0 VS ie</title>
8 d9 M; P. p9 N" M; X! n J<style type="text/css">
2 d! z1 X+ q/ X1 b( M<!-- ( H5 F8 |, w8 H3 Q2 A
body {
# f% j, Z8 B: \3 S5 ?. `font-size: 12px; ' {, _) |6 x/ k/ u5 B& D
text-align: center;
( f( Y! W) Q/ umargin: 0px;
- K0 s s) d$ V" k0 V7 qpadding: 0px; + J! Q& Z$ f- y2 `
} + F1 H: e7 p" u, Y8 A
#pic{ ; W G% t, o, S/ f. f) ^( V
margin:0 auto;
6 B5 ?" C0 \% v3 Z) K width:800px; . c+ |. Y3 D' O
padding:0; 4 f8 p/ q+ S; u% O9 }& K# D
border:1px solid #333;
* H0 G+ C2 d' L7 W5 x6 _2 k } & J* T1 J% q& y' F3 R/ A
#pic img{ $ A- ?0 U: u4 T3 N
max-width:780px; / t& P) ]# J7 @9 @$ [5 S
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); % u0 j# \+ g1 p9 O
border:1px dashed #000; 9 [! h8 r% Q% X# t3 U( y
}
9 s# G+ T; G3 j- r1 ?9 l-->
; B, n6 W3 S8 V3 \8 G0 z</style>
+ c W- {$ `1 L</head> . W3 [# V* ?! I* L$ P: p2 _4 T
<body> * H5 @; w4 K2 C! Y3 z
<div id="pic"> 5 J( n; u2 q7 A1 \8 s B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 a. c# ?$ `% p+ i1 [4 f
</div> ( H6 S+ ~/ J; Z* z* l k2 ^
</body>
: x n# c2 t9 k" k</html> |
|
发表于 2007-12-8 14:55
| 