|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 |6 }$ F$ z# `关键在于：max-width:780px;以及下面那行。$ W* \1 F7 H) U3 {
固定像素适应:
- ]/ c3 @6 \8 P! k
1 k" l5 H$ e( ~& |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> 以下是引用片段：
$ L& U! e% _% h5 [9 Q9 \" J( \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* E: u+ d: A2 }+ k1 t' k) l T<html xmlns="http://www.w3.org/1999/xhtml";>
7 k9 Q2 |9 f- U. V+ q+ Z<head> . K9 U5 K8 k' T2 V
<meta http-equiv="Content-Type" c />
+ r5 S3 \' d# ~- v# g! H* m<title>css2.0 VS ie</title>
( w) |! z" | u5 _<style type="text/css"> 0 y% X2 l: f+ F8 U/ V
<!-- $ b4 N1 J: E# u& K. _) ^+ \$ j
body { 0 v9 Y+ x( k- i2 G5 D$ A2 w
font-size: 12px;
2 F0 d! J0 a* \3 n' Ytext-align: center; 5 [; q) g6 ?& e' q1 J6 P4 P2 M
margin: 0px;
, G0 _3 N. G0 S; J3 Wpadding: 0px;
' A+ ^, J2 t$ `" o0 \9 T}
6 n9 ] H: ~5 W6 t* S#pic{
' x1 D( ^( e4 d! p margin:0 auto;
( ~ c5 f; x7 t8 x' ?; Z& }; I width:800px;
5 ?9 U) p& H' \3 J4 u7 c padding:0;
# r7 @ Y5 i, l, Y6 _( h border:1px solid #333;
0 K0 |7 R. w: R$ F6 a2 s } - o3 }& X8 y1 v. _4 r0 D
#pic img{ , f U2 s2 a; `, t3 K
max-width:780px;
6 N. [( A3 ^8 Dwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 1 h% U/ f) Q( Y& k
border:1px dashed #000; . U- J: ]4 e4 e5 x# m. B
} ( c/ L8 B5 I; h$ y4 S) X
-->
$ {0 f. j( O. ]: h</style>
& @: [7 [; Q0 d; H+ s</head> ( d) B3 g! E: k& w
<body> " V! U7 n, E; H, h4 o1 a7 j
<div id="pic">
0 x4 v/ U5 [5 q9 i! M! w5 E5 K<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 M. z4 b+ U$ x- K! s& d
</div> 2 g) m8 R" U- Y. ~- N6 J
</body>
; a3 V2 Y6 w4 R6 K/ f8 o</html>
2 G9 l5 b" ~2 p7 p! V6 C8 `6 G. v" D" D* I
百分比适应:0 {/ _8 O. U2 T+ Q! S
以下是引用片段：5 j7 k; g1 Z* d* x4 s3 I- X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 T( i+ c+ o2 o' G) I+ u( R<html xmlns="http://www.w3.org/1999/xhtml";>
4 `9 c& K- V; y( A( A; H% J: l<head>
5 a/ c7 K1 n% T1 G7 C/ I<meta http-equiv="Content-Type" c />
5 u$ Z5 [" p. E. P<title>css2.0 VS ie</title>
* T- i+ U% E1 k+ z5 A, v* ^<style type="text/css"> , G, F+ K1 F& U+ a( {! C' y0 z
<!--
3 Z; C7 P) ]9 b" {* ibody { ; h8 \& G! [/ Y8 b
font-size: 12px;
0 T# H& n/ T3 i7 j7 C0 G" q" itext-align: center;
8 {3 k: w! o! p" M" i) o Hmargin: 0px;
# {( q/ H) y, n$ u/ |padding: 0px; 9 x- ~0 [: {3 p4 U; c8 u8 u i$ u3 i) ?
}
$ `# _! X3 ~9 }+ _! l- P; w" Y#pic{
! G; v8 ^9 u4 A( m4 N* ]% s margin:0 auto;
# l5 ]* A* h8 C* g8 [ width:800px; 2 ^7 ~9 V T2 h7 _7 o
padding:0; * c4 P9 P5 R) T0 \: p! `
border:1px solid #333; 9 ]5 \% ^ Q1 M0 c5 F& p* @% R
}
$ V) s8 ]$ O9 }) T3 O#pic img{ : N$ L5 ^- i8 r6 \: [$ m+ S% e
max-width:780px;
. c5 D/ l# d$ F- l, \width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' n d1 |8 p4 y8 }2 n) J* oborder:1px dashed #000;
1 y8 s* W0 K0 h) H4 Z# E9 j} 3 J9 U, g! o6 W
-->
- M: a$ m: f" d6 z' t</style>
U8 h5 @. k1 n! {</head> ' o; t C( J6 {% w5 N" T/ u+ a
<body> 9 X: o. l* Y( X& Z. s7 j+ x' C
<div id="pic"> 4 w' I+ i0 P0 ~4 _4 ~- `3 w
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 T+ Z" v. u- x7 h- G; l8 u+ d
</div> 3 ~/ T& `, q$ s; W
</body> 7 W! s$ m2 k3 b: M1 q; A
</html> |
|
发表于 2007-12-8 14:55
| 