|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14333
- 金币
- 2452
- 威望
- 1647
- 贡献
- 1400
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% A5 x* k5 g5 G7 [' l& U* }
关键在于：max-width:780px;以及下面那行。
9 r. P% [5 U! C6 [固定像素适应:
$ b; F! }% q7 O$ X' _6 s* {4 a' F. g! F
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> 以下是引用片段：6 s9 l1 \% e+ h+ s& J( F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , X" a8 S1 o% C( T1 T8 ^
<html xmlns="http://www.w3.org/1999/xhtml";>
- a' I9 l" t& j2 G# ^<head>
& y: i! \; M7 n9 }: k" V' U7 M7 s% u<meta http-equiv="Content-Type" c /> r: n/ b8 E) M: h' d3 z |
<title>css2.0 VS ie</title> $ O) F9 e1 i# A! M/ Z6 k
<style type="text/css"> $ _. ]- x% x+ h
<!-- " b* _& e* t7 }4 X/ g( Y0 B- @
body {
- h* S1 B0 t1 Q# b6 E% ?font-size: 12px; B! |" `/ r" I" }
text-align: center;
' x1 q* h% H" D3 O8 Q$ n8 zmargin: 0px;
; u# k8 H1 c% Z+ Epadding: 0px;
I$ H( b$ G/ l w d" N& b$ J}
" W5 d% J3 b% e! E. @" \8 \8 g#pic{ 3 F6 _* B8 L7 }2 o, W; k
margin:0 auto; # u$ @0 z$ q( H4 e
width:800px; , u; |! ?# Z2 N: N
padding:0; ! {# P7 J# ]# h( d
border:1px solid #333; ) `% M. y! c6 Z, y
} 1 ?/ N# X4 N! d0 a4 R2 m
#pic img{
/ k# L. ~4 h3 W6 X$ D& }/ B max-width:780px; # c4 o* s; E7 w( L4 H4 ^% ?
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 A$ Q# A* G$ X/ h7 E; }border:1px dashed #000;
8 I. q6 ~3 i4 F A( n} 7 r* i2 U# H* q% c! d
-->
& U+ U2 U5 L8 _9 R</style>
0 K) s( y8 x. b7 b( e: C/ x. Z: y</head>
* B8 }, E% ]2 ^4 j4 H3 K<body>
" V/ ~1 p; \( B! g2 O' k<div id="pic">
e# n8 d4 g# B) v<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
A( S m [/ t</div>
: A* u4 V+ m3 ]8 \</body> 9 L* @6 o9 p8 c# Z
</html>
* i6 V9 e/ v: |- ?# i4 P. P: h
7 Q% O$ l) D/ W8 n: z% \百分比适应:& u2 [6 u" f. a* H
以下是引用片段：8 E, D3 v; K- L3 U$ j/ o( s1 O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ q; u; H: |, Z- C3 z- U<html xmlns="http://www.w3.org/1999/xhtml";> 2 ]4 u& q& V4 y' o6 u0 M4 c6 t
<head>
! T" l, b0 H/ _. @: |1 m6 G6 X( N% i<meta http-equiv="Content-Type" c /> & t$ m0 ^% M7 | m' [: T
<title>css2.0 VS ie</title>
7 q+ w7 T0 l5 ^<style type="text/css">
1 N+ x5 E$ b5 x* n/ E O7 A<!-- ' @( c) h( H1 t- x! Q
body {
9 g, h! `$ O) t- G8 @2 \font-size: 12px; 9 y( l7 h* Z- A
text-align: center;
, b2 w* Q7 D# J9 d0 jmargin: 0px;
. U: K) Z" Q: S) q1 ]/ M8 W, t- Bpadding: 0px; . M* h/ t$ V" ~2 Q- P/ H$ m( B
} % Q4 _, D% [5 h% I3 B9 i
#pic{
\' N9 w$ Y- T% K2 i margin:0 auto; 0 S( K8 D8 J, I0 W7 V$ x
width:800px;
|9 a2 X5 ]" M padding:0; : V3 o; s" @& c. M* ^9 ?
border:1px solid #333;
; ]6 j; ~( u2 j7 i8 t; `/ p }
5 n8 Q- o5 Z: K' n#pic img{
9 y9 P. m5 c; \5 S3 W max-width:780px;
: b8 I. s$ T0 `" e N+ d7 Qwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ n% Z; V0 L) b' Z2 Pborder:1px dashed #000; ; S$ w6 `3 V; n! h- I: A
}
8 T$ Q- z! T$ I( m. f--> / d, |8 P& N8 r2 f; j2 W2 h$ y
</style> , t, m/ x2 X( {
</head> 4 U& q3 |+ r8 `# Z8 i
<body> # u% N$ w% C9 b
<div id="pic">
/ ^, f+ B1 R! w5 p* [9 {$ J<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ m8 Z& _, A8 y3 X1 s% j
</div> ) a' @6 Y# j0 }( d( N& p
</body>
B1 e, o8 M; q8 Q, n m0 ?</html> |
|
发表于 2007-12-8 14:55
| 