|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14397
- 金币
- 2484
- 威望
- 1647
- 贡献
- 1432
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" V2 N7 [' Y' _5 t: f7 r关键在于：max-width:780px;以及下面那行。
3 l" k; J h) e4 S固定像素适应:
! t8 L( D' ?% _, R, A1 t, x( W% d2 q R+ _0 T' E
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> 以下是引用片段：4 H" I. a8 f4 M2 G( D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 ~3 S( L, T" H<html xmlns="http://www.w3.org/1999/xhtml";> $ L; l. M9 u- A# D4 o& j
<head> ' v3 I9 |# t* I5 h" _" V; A9 b( q# D
<meta http-equiv="Content-Type" c /> / U2 c5 V! L& m& d1 X
<title>css2.0 VS ie</title>
3 d ]* O' ?% g. r<style type="text/css">
, {4 r6 M; C3 T; F9 j. o; M<!-- " n; s* n7 N: T) s k
body {
K" K1 d# T! i+ n+ Z8 K }font-size: 12px; : y7 T( q3 ] u5 R0 E2 A) I
text-align: center;
' ~! F( O3 j N% ~1 z( z, qmargin: 0px;
! v; B0 y Q+ G1 O/ g8 z) Dpadding: 0px; 8 R; w+ J5 r, ]/ T( G
}
( I7 K S4 h) U0 f$ U2 a#pic{
8 g& f2 N! p+ x+ |1 o margin:0 auto; 3 O' E* X: o' E
width:800px; ! T8 Y# L* x& X3 m( t; a
padding:0;
* x. `$ ^$ l6 x5 E" V border:1px solid #333;
& z$ {+ j) D6 O# T4 x } 3 g6 F9 {( F9 I' B' g
#pic img{ ! Y- `* }; ~ u8 ?8 r
max-width:780px;
- q# E. U" p0 b) P' E! c nwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); / s8 T9 M+ a' q1 V- c Q
border:1px dashed #000;
5 q6 H3 T$ M s! g0 q8 C}
* f* u# t8 T1 _ j4 U r0 X--> y- N+ M& J0 e% Z. Z) u
</style>
9 \5 x0 r) L! v& S( B: |0 r</head>
( y7 X. m3 }) `) t6 R6 D: g<body> % C, N) a) C3 S R: R( t
<div id="pic">
# E/ y) L$ M( n$ _+ q1 z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) n4 m& c+ v l1 X
</div> 6 ]! @" A' r/ f* G# G+ @+ y
</body>
+ X/ W' ^. d% W3 z9 {# S0 J( ]# I</html> 4 a0 M, A( S& f$ r m! V
- K# b. k) @- E6 L& F- [+ ?+ h百分比适应:4 N! G! U" ^' V1 s+ I
以下是引用片段：
: g7 e+ r! X6 ~" _3 _" u<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; v& `) A( C( _7 \
<html xmlns="http://www.w3.org/1999/xhtml";> . {2 ^ b6 \" J5 U1 N
<head>
# M- L9 ?# ~ }8 U- X% e<meta http-equiv="Content-Type" c /> . G$ ], k. A p" d
<title>css2.0 VS ie</title> $ l: y2 ~& [" }1 H$ ~$ o( _) M' H
<style type="text/css">
) I+ \: h# H; _1 G `7 x7 T- a1 `* X7 D<!-- 8 V d' }/ e# g7 ~- v1 l" k
body {
! r" r& Q g: W: s: M0 cfont-size: 12px; ! \+ |% s( v: Z
text-align: center;
' L1 N8 x l. K K; ]. A6 {8 a, pmargin: 0px;
5 j7 _0 W7 n# m2 r4 wpadding: 0px; 1 h! p' _/ _) K# U
}
, a% t: U3 i% O' H* D! M1 ^#pic{
7 o" h) g! t. G- M4 r: o% l margin:0 auto; 7 }7 W% f1 a' c: C2 |
width:800px;
6 _" b- H5 Q3 X$ Y2 Y padding:0; 8 F, T, M+ e$ L; n! \+ [
border:1px solid #333; * ]+ J, t: r! E0 L5 D# D. V% D
} E) ` {: D! l
#pic img{ 8 k6 a f j; ^" e% ^3 y! V
max-width:780px; % o; P* w; d' Y4 h4 U" `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 X% L( u0 |# V% Lborder:1px dashed #000;
! ?6 J# u: }8 O2 o4 h* u3 N} # f! o# A! F! ?2 t6 A5 T9 C4 b+ [; ^
--> # y6 f! x4 d o& I- {, M8 q
</style> ) d( B4 ?# P& l0 T* a
</head>
0 k+ ^: j; U' u Z; N2 W<body>
5 R8 Y7 S9 i% C) a- {4 c% Q<div id="pic">
: R/ j, |1 G8 m2 L5 F/ I1 F V<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; Y7 p1 B0 w* m. ~8 }
</div>
* V; r2 C! W: D% i5 t</body> 3 I5 F9 H% P6 n
</html> |
|
发表于 2007-12-8 14:55
| 