|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ \- f+ R) B/ b& i7 t1 V关键在于：max-width:780px;以及下面那行。
* U& I9 t' O' ~, X1 ~3 V固定像素适应:
+ m, U- T% v4 g. D
9 y0 ]- V M1 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> 以下是引用片段：
6 p1 e7 ]1 g6 E9 ` c" ^+ ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) B# |8 N4 D; Q- o7 s
<html xmlns="http://www.w3.org/1999/xhtml";> ' _# {0 ]$ l& y. K1 P* h7 X
<head> 1 V' j$ k, j$ n; m: p& ]. [
<meta http-equiv="Content-Type" c />
+ f! f! l" F5 J+ y<title>css2.0 VS ie</title> 1 F' E0 g3 v+ | ]: P" M; j& h
<style type="text/css"> 4 H+ l& s! t4 Z1 h4 h5 e
<!--
6 M# F! S2 G$ ?% l: Tbody {
" S# C' G" P" h3 |4 i. E9 Cfont-size: 12px;
9 B C" n8 U( t4 w3 S( W# k% ]text-align: center; & {1 `3 x, J, f+ C
margin: 0px;
4 M2 f# s _# }' y5 n. N5 Mpadding: 0px; , R0 S \: w# v
}
: j7 | i; g. z7 u' d, h#pic{
9 F) K' e% z: }! |* F T' Z2 e* L& }7 z margin:0 auto;
/ _' s) s- a# w5 Z; ~ width:800px; ) ]# m# w) d7 g4 l& a
padding:0;
$ b4 R! c! R% w% a8 @1 C+ | K border:1px solid #333;
2 T( ]: P5 |: l' W' v }
) |8 S0 R( F0 u* |% b#pic img{
2 H! h6 B5 H2 v; [ max-width:780px; 2 p: V/ \/ G& s
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 \ V1 f- Z9 a
border:1px dashed #000;
: v! j% H+ M3 l9 W) u5 D}
9 \0 z+ M% ?9 q" s% |+ [7 D0 s--> 5 }) ^# H0 V0 M* h7 k
</style>
& n c/ K8 ]) A. y8 d. }& l5 Z</head>
/ M. z3 l0 `$ `% o<body>
6 B0 U5 B/ n+ v<div id="pic">
4 X; d9 d8 |3 p4 Z! T<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% p6 G f" m8 }* Z</div> " Z9 [ K, ~. n0 m
</body> : c) `/ L3 v+ A
</html>
( m' ]" U" v0 G8 e+ F9 t3 B n
$ t0 z5 e+ y4 y百分比适应:
" |+ ]( [$ }+ u( v5 S+ Q; D以下是引用片段：8 O3 C4 S9 l1 Y6 ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 D0 x' V. `4 {, Y<html xmlns="http://www.w3.org/1999/xhtml";> + ~+ |1 {8 G2 R* Z* Y, M
<head> 2 A# R+ P) I# r) x9 Z# ]" F) |9 P
<meta http-equiv="Content-Type" c /> n- c# F( M$ h# D; Q+ B* I4 z) x6 s* A
<title>css2.0 VS ie</title>
o# M; W7 J$ Y# t7 O<style type="text/css"> & g* t i$ t( G1 ?9 K
<!--
+ `, `$ O1 C4 O! qbody { 3 P S% K, u/ F$ W$ F+ y5 ]
font-size: 12px;
1 q+ ?) q4 o& Y3 ^text-align: center;
, |, L! t r. L0 \+ ^margin: 0px; , v! n7 y6 N m/ _
padding: 0px; . l6 B4 t4 M. q/ A
} & Q5 c1 L0 E: H6 z
#pic{ 3 U. \; f5 |" I7 v# _- D. F' f
margin:0 auto;
6 z; }( h* Z) w/ |* g width:800px;
5 U& _, p, e1 e padding:0; 9 s% h1 R, [, d7 f* T6 K9 G
border:1px solid #333;
+ T a+ a' n% } } 9 a+ P1 M- F3 R0 M a
#pic img{ + v$ O3 s& f$ }2 I% D
max-width:780px;
% q- e+ h) ^7 {- l* ywidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
; y! J% P' s% f8 k' m: L) ]2 ]border:1px dashed #000;
# K7 L" ]) G) U0 g! w& m7 ^}
5 ?2 ?. p: g- _: n5 b--> $ v% x5 V- Y- H" q
</style> " v( U" F" |# j( T, W, U1 O
</head>
2 w6 c$ s x* c* x- }( Z3 x<body>
! Q& f, X4 o2 d7 V* I* j<div id="pic"> ' e3 ~' g- N# d, y: e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " t' x) ?6 B( [9 F% g- i" x
</div> 4 ?2 N$ W+ w& o7 M
</body> , _! b( N ~4 \6 m- g6 q
</html> |
|
发表于 2007-12-8 14:55
| 