|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14189
- 金币
- 2385
- 威望
- 1647
- 贡献
- 1333
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 u- ?. g8 }. G6 Q$ v关键在于：max-width:780px;以及下面那行。# p8 K3 W( _1 c& N2 q
固定像素适应:
# B; `* X* Q) l* Q" J& D* V( E6 O$ }4 z* A4 I
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> 以下是引用片段：0 v: h; ?; c. _3 `* I! r! [! J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% \0 }1 P# R' e8 p: z<html xmlns="http://www.w3.org/1999/xhtml";> * W; r6 s1 r# ]+ Y: N E: X
<head>
. b/ m" c# A: `<meta http-equiv="Content-Type" c /> 9 |4 i" h: t! N/ \ w7 ~
<title>css2.0 VS ie</title>
5 n2 @8 k, g, N. V( L9 |<style type="text/css">
/ T' j T3 P `) o) S! s5 t8 ]2 y<!--
* V u5 h8 y6 x9 Ibody { + ?* H, h& |- s; p6 R% {+ Z
font-size: 12px;
; ~4 z) L: H8 u- u7 \ Ctext-align: center;
) D# h% M) o# Fmargin: 0px;
8 t' k4 u, t- [$ K" g+ F/ F1 M/ Rpadding: 0px;
. K" B/ b* z) V/ R$ A w} ' P v. ~& t( ]; z3 c$ }/ B: u1 V& t
#pic{ 8 P& B; W) O3 o) _
margin:0 auto; . w- K& f! _9 o% @& e/ e- J
width:800px; / i x5 ?6 d4 m% p
padding:0; ( }$ n' l4 q+ F" R( Q
border:1px solid #333;
" ?& K G3 l1 F8 [: j } * _$ i9 ^/ L. E# M/ L/ t
#pic img{
) m3 ~" S' o/ f' h6 K6 l* i. A( t max-width:780px; 9 N' H4 H! x* H
width:expression(document.body.clientWidth > 780? "780px": "auto" );
. T- p4 @* c9 K( c/ ~border:1px dashed #000;
& @- j, p4 m$ F- T2 j3 Z} 9 q. v$ M% l( {
-->
5 t' b$ E. m/ W) b% g0 T</style>
- _* V# I9 U2 z! w5 j$ X8 h</head>
) ~+ n0 s6 \3 e<body>
) e7 q7 z" B! @. w) }<div id="pic"> 7 D( [! h N7 O) \5 [* n5 O# k6 O2 e0 W
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - e' Z! |' ?% t! h# f1 S: W' o8 p
</div>
9 Z! Y4 a3 q/ Q. L: o: ?</body>
- g+ r/ B7 L# l</html>
3 M. R+ ?2 k+ M: b& [" J/ \4 f
! Y3 X, L* T5 V# _; M$ F3 p0 O百分比适应:
# A) @( x. h' D以下是引用片段：
$ o( w" g0 b2 e4 w; l<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 ?9 G) q& b% p1 @9 U<html xmlns="http://www.w3.org/1999/xhtml";> , c( R' a/ j6 }2 G+ p
<head> 3 P1 H7 V' @" ]( h) _& N
<meta http-equiv="Content-Type" c />
O8 [3 a! z' l+ s1 {& u<title>css2.0 VS ie</title>
1 O; ]: l4 k! M- u<style type="text/css"> ( @4 Q# s- d6 n: G. B& r7 J
<!-- J) \3 k! L- {( R% z, ~9 y7 q
body {
$ q0 `0 Q/ [9 c; k9 Sfont-size: 12px; " J' q0 e0 ~5 l* f' @
text-align: center; ; t9 K9 w. |# o" C
margin: 0px; 8 n+ t: U" h6 @
padding: 0px; 2 ]5 |5 Y }9 G6 P9 E% C# I
}
! ]+ v4 x& w. S2 C7 g#pic{
" B! K# o" e& w7 n, J. p margin:0 auto;
& R* ]& l, K# E8 v9 ~ width:800px; " o5 S$ j0 L/ Z: G2 a
padding:0;
$ N: g8 b0 Z% b9 u7 g border:1px solid #333;
, L) u: T* w$ W6 |9 ?1 {) F }
! n7 m$ m& f6 [- ]/ t' L5 x#pic img{ ! t, z4 ?" x3 r& h# S5 w P
max-width:780px; + d5 i0 M/ ^3 _% f& _! W& o! P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, m2 H4 t' R4 C" H- ]border:1px dashed #000;
% R1 c" ^% ?" Z& O' g) K} 1 m7 {( o ^4 G( n2 t* R5 X
--> 1 N& j8 e$ F7 p, E D- ~2 Y* C
</style>
4 w0 Z5 m3 H* P! Z7 d</head>
( q% j! I; c6 q e8 B1 J: @<body>
5 t2 T1 v0 R {8 N \6 h. e<div id="pic">
8 r7 b! y, D @<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ G9 S1 L7 Y- T6 {
</div> 9 Z3 v- h* O* k$ b; _2 q
</body>
& \9 A+ H, d: v6 o9 t</html> |
|
发表于 2007-12-8 14:55
| 