|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14323
- 金币
- 2447
- 威望
- 1647
- 贡献
- 1395
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 U( R7 \& t. J$ B4 p关键在于：max-width:780px;以及下面那行。8 e/ ~! @9 H7 b( p0 y
固定像素适应:+ E: r7 C% m* \' F% _/ ~; J7 H$ E; V
' Y! Z+ f$ _. C/ Z. n/ \7 m0 \
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> 以下是引用片段：
( ~5 `! R a- x* n4 X1 E. Q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " Y, W; ?6 J/ ~5 b4 l, `. o3 Q B6 {
<html xmlns="http://www.w3.org/1999/xhtml";>
/ R. v& |1 i- _6 J: e- D- u6 e<head>
' S) N* U+ y5 X0 c<meta http-equiv="Content-Type" c /> 5 H+ S5 J8 R9 Q: u6 ]( o
<title>css2.0 VS ie</title>
6 l' L. V6 W: H0 z<style type="text/css"> ' B6 p; f) ?- D; ?1 S* R
<!--
/ x: e( t8 Q& ]1 r! [body { : j% F1 T. `3 u% O v, e( @: p
font-size: 12px;
9 H+ i: U/ L, g; V( Qtext-align: center;
1 z' V. L9 D5 Q# mmargin: 0px;
7 P5 g0 r$ ~6 |: E9 c3 E5 c6 x2 ]padding: 0px; 9 ^% u$ V8 ~5 }& d
} 8 B a9 ^) R4 p" @4 F
#pic{ ( ?7 \' ?: v4 u" y$ G2 p
margin:0 auto;
! q: |/ l! U& J: o$ {, I width:800px; 2 I- i/ C1 |: q5 t
padding:0;
: ] o! u# L( j9 B) Y+ U border:1px solid #333; O, k. {1 D7 @
} 8 }4 i# K1 l8 j- f& l+ F
#pic img{
; [1 u' E* \ T6 F max-width:780px;
. O: I0 r/ _+ l7 n. @width:expression(document.body.clientWidth > 780? "780px": "auto" ); F7 m8 F K' @/ X2 B, j
border:1px dashed #000;
! I) c1 M8 k& r9 p7 s' S}
, n' Q2 B% C" e5 E5 ~' A--> " J( \# h# }$ d0 U4 f
</style>
/ v3 w0 s8 M) y" J! z% M( {( J8 H, k S</head> , b; V" ?4 R3 }' `+ o3 y
<body>
# D7 u5 V/ `" D1 D5 X<div id="pic"> : N2 F- {+ s5 T% m) P# a6 W
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' P P0 l& u, c% q6 D) U9 P6 G4 }
</div>
4 c# t+ ~* a, W% D4 g! F</body> 4 Z$ l- |5 z) K, W$ b g0 D e
</html>
2 |) \7 E7 N4 e6 u
! I5 Q# t# ?. I# d! w百分比适应:
0 R7 X2 K E1 u$ f3 A以下是引用片段：
+ c9 u5 g, }% K* |1 ^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 U0 T# P6 `' z7 C8 g P
<html xmlns="http://www.w3.org/1999/xhtml";>
3 |0 e, d* U- |3 ~8 h R<head>
1 U/ n2 ?; b3 k3 ]+ \ D" F4 Z D& \<meta http-equiv="Content-Type" c /> # S) R2 o6 i+ n' G; j/ _9 a9 ~
<title>css2.0 VS ie</title>
5 }* N# J& i4 R1 M; L E/ O<style type="text/css"> 1 t. z" Y: R6 v, I, y* I
<!--
* O6 U9 V1 \2 d7 [" \3 Jbody {
* B" ~! X# c3 e( _) afont-size: 12px;
# E$ M+ j$ V/ Htext-align: center; 1 J. D3 J6 y3 v3 a7 \- k/ }
margin: 0px; + ^2 a' R" k* _8 o
padding: 0px; n8 b8 E' u) `9 A2 r* E4 x" S& @# q
}
7 t8 J0 A, ] ~6 I" u' ^( W#pic{
$ o( c) `; q7 ^+ e3 G% k7 y margin:0 auto;
$ Y# Y# b' \! y& V- }+ V width:800px; ' x! q5 I6 v# e+ x& N4 B
padding:0; n: ?2 \/ r6 s% z% N$ y2 x1 r
border:1px solid #333; 3 Z+ J% e* H( ]' M" {
} # _% W: f1 [- V; p2 q6 j0 c
#pic img{
+ `2 U- x: Y* C5 `# i max-width:780px; ' Z+ y* q9 \4 N3 D; Y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 q M' ], T" z4 Z2 Rborder:1px dashed #000;
) S& c' I1 L, w! [# ?2 J C9 e} ' o; w" ?( X, y$ F* y/ z3 ~1 G4 v' b
-->
; ], ?3 o+ ]8 ~; c1 R</style> $ ^" A! {# ^! r( ^; @' F5 v
</head> ; z/ I! ^+ B1 ~4 C
<body>
; Z2 D/ K4 u$ J$ M3 E9 |<div id="pic"> * }9 S0 t3 i7 A7 }# R" r. j, K
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( |& I6 a0 I3 V0 |- H' e
</div>
+ _+ o6 A/ k4 l( H. ^7 j+ t</body> 1 R G' H+ u) z% p5 v6 t9 _) ^- K
</html> |
|
发表于 2007-12-8 14:55
| 