|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: x& M# W9 P6 J6 f9 B N关键在于：max-width:780px;以及下面那行。. B0 s" m6 _+ c; J; w* r
固定像素适应:
' c! d- X0 }; X D' ?
: [' `/ a" f; o. K0 P" P5 n5 Z7 E) Wdotted; 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> 以下是引用片段：
9 l+ d$ m/ S( J/ u. r2 N2 n3 E<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' l U$ h9 l3 t5 `" H' D) j% A/ B<html xmlns="http://www.w3.org/1999/xhtml";> * L! X7 x. h( N& b; v3 @* r- F. F
<head> 9 {3 @- x( Q g" U8 R; K, ~. T
<meta http-equiv="Content-Type" c /> 8 x: f0 _$ b, f7 J: ^6 c
<title>css2.0 VS ie</title> 1 r8 C6 Y" Q) _7 ?. @5 `* X+ T* ^
<style type="text/css">
2 X' K/ ~- k# ?5 J. m9 ~<!--
& e4 K/ W z, Qbody { - t2 M3 }+ G3 @/ \( o3 P
font-size: 12px; + H! R$ \/ h! n1 v* {$ E8 K! n
text-align: center; % X( c+ n! U, T; n p& S
margin: 0px; ' R0 B h2 }1 B5 r- u6 P
padding: 0px; ; a0 N5 o( X- j
} . }2 {' R9 W$ C, b
#pic{
* J0 }) a0 u; | margin:0 auto; - c: J' ?& G4 W* H0 \
width:800px; : \) k' x: l$ b. P9 k2 O: F/ w
padding:0;
1 T& I% c! b5 Z% Q/ z border:1px solid #333; + w7 L0 Q8 P* |& r( h; h. ~; g9 h
} 8 j* q" g, D4 I" h
#pic img{
) u0 [" V* m- o9 Y0 v1 O! Q7 | max-width:780px;
: K$ W- t1 v [2 L! ~: l4 \8 a/ \width:expression(document.body.clientWidth > 780? "780px": "auto" );
/ K: T+ f1 y" h2 W/ o+ u) {border:1px dashed #000; , r7 M' `! Q q. {
} $ T' ?5 S' ^/ c0 _4 v
-->
( g4 `9 h9 I4 A! n& |5 A</style> 2 b$ ~1 I* I' y$ \/ ]
</head> ; M* ?( W" e5 X
<body> 0 n5 }4 e9 ]3 s3 }, G
<div id="pic">
9 J9 W5 P/ k+ Q& B ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: c" _& J3 g/ L</div>
% _# N) m, G% D# O# m</body> 2 @3 o+ ` ^% q" R( K
</html>
6 j1 \; ~( G# H8 Z+ l# F6 i! ?5 U! T" ^) e& N+ ^6 v9 ~
百分比适应:6 L' w3 M, P5 r" w. [1 W
以下是引用片段：1 P. L' T4 B% f; o, f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! D- {0 i0 K" q- B: f* q$ X6 }<html xmlns="http://www.w3.org/1999/xhtml";>
0 {5 }3 x+ Z& N7 S% f<head> t2 U D1 O3 q
<meta http-equiv="Content-Type" c />
( j9 ?: Y/ [; E; s0 m6 U5 N/ r1 q5 P<title>css2.0 VS ie</title> & u% U+ ], q E: o% f
<style type="text/css"> # w2 ?. x5 U0 k# W5 j/ _/ ?
<!-- ; _" R1 P0 G6 n, c' [
body { : O# x6 K( D( C. @( f8 P, y6 V
font-size: 12px; 5 J/ p( |: M3 l6 Q9 B& L
text-align: center; 3 T: }9 _& \7 l) E
margin: 0px;
. E5 W, j- l7 `1 j$ `5 Kpadding: 0px;
/ E2 S3 E" p2 _& K B1 J _4 u/ p}
5 _6 s( R+ }7 r; T$ [#pic{ $ Q0 Z! b; F7 ]) w7 g
margin:0 auto;
/ F2 B. e% O+ m. g9 s4 g- L" R width:800px; 2 C0 I4 A" ]# C2 `' Q4 D1 e
padding:0; - } _. x6 t Q. \
border:1px solid #333;
, a# N0 P# n2 D n' V& n }
8 e# T$ P; X" O3 O#pic img{ " s& L4 g0 S/ x; w {; A
max-width:780px;
8 I+ g# g+ j. r. j( P; nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 ]; g! w, N5 {6 U4 @border:1px dashed #000;
; i# x1 A9 u, f K4 w" N2 u2 _! O} 8 e' K3 \& B. k/ x0 t2 O! u: f: I
--> ) O9 u6 ?& n A5 R
</style> - C8 X5 G4 n% W& l9 }6 I- x4 E
</head> 7 @, u/ C% q/ c9 O/ @, o
<body>
! W* B8 C) K; q6 w; ~<div id="pic"> 5 W$ {& S- J9 s3 B2 h
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 z6 P, ?% c' \7 S+ }! a
</div> 0 h; a) b- r0 W w8 L- i3 ]
</body>
, ~8 q0 l% |: i9 T( f</html> |
|
发表于 2007-12-8 14:55
| 