|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14349
- 金币
- 2460
- 威望
- 1647
- 贡献
- 1408
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 C! `5 T( { H* g9 R关键在于：max-width:780px;以及下面那行。* B% i, I" Z. E8 T; M
固定像素适应:" e+ p& f& d; F, c
2 n. B1 C$ h( @$ z& [8 Q* v9 Bdotted; 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 Q& ~: ^: |- @2 X% R7 h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( z4 [+ _3 V& A8 S3 h+ ?$ Y<html xmlns="http://www.w3.org/1999/xhtml";> ! J1 ?% m% B: L6 _2 @, p
<head> 2 u v( ^5 ~6 f3 A- n/ f
<meta http-equiv="Content-Type" c />
4 M# d- B0 Z* D! d) j! C/ {4 ?3 ~<title>css2.0 VS ie</title> ; U: Q# m* z1 K# o4 p) y6 w
<style type="text/css">
& s) r' }) n3 _9 C<!-- % [8 T/ D2 F3 s' D1 B( b5 ]
body {
. I; l6 Q" @; N+ P& Nfont-size: 12px;
6 O% u( |- R" X+ f% @' B& @( rtext-align: center;
0 t2 j. D" A# l) o% Y9 [+ \2 j* d! S+ @margin: 0px; # P, T( z* R! O! n' t
padding: 0px; 7 r1 D* Y( }5 I- S y7 v6 }
} ! g( ^. j+ z. O& }" U) F( a
#pic{ # [0 ~% q( {! d8 m. o4 j5 z
margin:0 auto; / u u3 c1 C, q) ^/ w T0 W
width:800px;
' n7 J) ]# b9 E: [) r2 u% r padding:0;
+ i8 [# ]5 s* x4 D border:1px solid #333;
1 l7 D$ ^" D4 [ } ) p, y2 F- U- B6 H+ D
#pic img{
) F0 ]# J7 [1 F4 A! n! I1 f) U, y max-width:780px; % V% m& |3 }( W* r
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ; A* o9 x! |: l9 T
border:1px dashed #000;
0 Z, A# [ J* j- c}
0 v& ~# ? l! x' h--> 7 h; ^+ R( X. N2 x# p$ ^
</style> ! V4 C/ A" k1 ]
</head>
`7 i6 P/ t* a<body>
1 h2 I o4 W8 m9 F, h<div id="pic"> 7 L6 v6 f- X3 B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 u2 ^( U7 ~! c* |* T# n( n) o
</div> " g8 }& _6 B; A- u% n% O Z! H/ a
</body>
6 C. o7 R' w; g" e, h" w: Y</html> 1 m- f* ^! I' z8 P' _% ^ d' r" B3 C, r! e
+ h: d% G: w9 {! y, a百分比适应:
' Y1 [2 a. _8 B$ @' r. }' f以下是引用片段：
" ~7 p1 @- j& g0 ?. k<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / `8 ` E) @$ w* Y; h1 t' s
<html xmlns="http://www.w3.org/1999/xhtml";>
* q% y6 \. E; H+ a. d7 }<head>
* I- ~+ K" A( b( Y<meta http-equiv="Content-Type" c /> 2 m+ T# ]& g8 ~. `0 R
<title>css2.0 VS ie</title> 9 w$ P5 q. K5 x$ S) c/ p1 P
<style type="text/css">
& r a1 Z$ |& O8 N- c9 s: E$ H i2 @<!-- ' f! C% w$ B' M4 U( Z# B2 G8 Q
body { 2 F* Y) V: V; z# n# n3 d
font-size: 12px;
( ]6 y' b+ Y+ n# P+ L. T& o* p btext-align: center;
* |# K7 W3 o" f$ P+ T! Nmargin: 0px;
: ?% U$ e3 T, z5 `6 \3 zpadding: 0px; ( H! D6 M, W3 y7 |, O
}
+ C7 O4 s* {/ L" W7 e `#pic{
2 `/ q1 t1 K2 m* [3 L margin:0 auto;
3 d4 o4 F; \ Q1 w, e* e, x# ~% L* b width:800px;
5 q- A# g* j7 i3 A padding:0; 1 `$ ^- a# v/ @
border:1px solid #333;
3 o/ a9 w8 _# _! ~- \ }
0 ~, C( [; ` e. P8 J/ t#pic img{
8 N4 J% G2 Z1 m- y* x7 d max-width:780px; 2 A( M* B3 B- W9 ^3 F" N
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) f( Q! A+ h" b) S' G4 oborder:1px dashed #000;
% d* R p! p& m3 n* o} ' K3 ]- M# @' c* W( }
-->
' J- I) z7 X9 M9 q+ r" R</style>
5 }2 u f2 W. E, R</head>
3 J. j. q4 S; b1 `5 Y; a1 V( B. u<body>
- _+ b! w/ |6 x% d0 L7 j# O<div id="pic"> ' t0 k9 u" o3 L7 j. }1 q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 S. Q) Y0 f* w# M</div>
% {4 H4 k4 e! T2 {- M- ~8 f</body>
6 x) S7 w' r. d# y" e. s# }# q</html> |
|
发表于 2007-12-8 14:55
| 