|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- g' Y" O! B9 y) @) o关键在于：max-width:780px;以及下面那行。- l4 B1 M; R9 x" b a7 [
固定像素适应:
/ \5 w3 U3 M7 g* @5 s; u7 `) @- @ P% I1 G- x% t. m, M h$ ?
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> 以下是引用片段：
* s1 y+ Y8 X5 i- d<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # I+ W- B7 N. q( M: O9 M I' j
<html xmlns="http://www.w3.org/1999/xhtml";>
+ K- H, |! v6 v+ P6 _$ N<head>
6 g2 D7 @3 s9 h* l<meta http-equiv="Content-Type" c />
/ @9 a& Q. t3 \9 ?' c: W0 G<title>css2.0 VS ie</title> . j2 M9 E1 B1 I# \5 J/ E( @
<style type="text/css">
, Y) `" M, E! r<!--
- o, i& V4 ^- B- L0 Ibody {
* ^2 I, G& B; {4 Ifont-size: 12px;
2 }8 n0 e0 D8 e; T7 |2 |0 d0 ytext-align: center;
3 e% E' H2 K- n/ k0 u+ wmargin: 0px;
) Y6 H3 ~: Y6 f3 Mpadding: 0px; 9 H! K$ t0 h" d/ W7 e4 h" D
} 9 I4 X& t3 q3 D
#pic{
! ~9 k" L) ^+ k6 U G$ g1 q+ N* [, C3 F margin:0 auto;
0 a1 t5 U- e( T& z width:800px; ' K' H: i5 L0 v8 \5 h" j9 |) J
padding:0; 9 B8 A! j$ ]! a; n0 h% ~' n* m
border:1px solid #333;
# z) z" C/ I+ d8 \3 r } : j% p' j. H+ T: J! |1 L& L1 Z3 [
#pic img{
2 R, j* X9 }2 \! Q max-width:780px;
& y5 U4 }3 m, o+ _- |1 O. {7 {width:expression(document.body.clientWidth > 780? "780px": "auto" );
; g+ C; C. }5 d2 _/ Eborder:1px dashed #000; 0 h6 Y' _2 _6 J( `+ i/ C5 M
} : r6 [' i# l% l. E
--> . I+ v; p e( G
</style> " K% H) Y+ ]7 R0 {- T" S
</head> ; m- ~! K: ?3 m' t# Y: z. p" A
<body> 0 Z7 ? L( w) B4 |, q% h: X% a( x
<div id="pic"> : V% Y7 d9 w4 R
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ p. }4 @* r# j: o</div>
, x, u0 I9 _ x" w* _</body>
& {6 n8 D& W- F, d b: t( i</html>
4 z: |0 b0 p" D& D: O9 V0 Z
3 m8 g4 q# x. e, k' Z3 ~百分比适应:9 D, a* T9 F8 g
以下是引用片段：# z( H; J: l5 S9 x4 B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ p4 N$ w/ U/ s: I6 l5 {; y, P, x<html xmlns="http://www.w3.org/1999/xhtml";> , V+ t# m$ e/ v* `6 A, Q E a- Z
<head>
, \- u1 _- h$ q$ l3 S3 i2 ~1 w* r8 e<meta http-equiv="Content-Type" c /> 9 ?; A$ a/ `2 T3 D0 G0 D
<title>css2.0 VS ie</title>
( w6 n4 E* N- u8 @<style type="text/css">
9 l: q% j+ q8 [" W/ f7 ^<!-- 6 }7 N( _4 w2 ? O8 [8 r7 x5 D
body {
% b! F2 d) f+ ]$ Xfont-size: 12px; 7 K5 |( E6 R% L4 T
text-align: center;
% F$ [+ N6 {3 t& K7 u! H/ P4 ]margin: 0px; $ y% j+ n7 R* B5 y J4 e" O% @
padding: 0px;
" Q) h( V( J- ~! m% G}
8 }$ S1 T" ^% x% r* [#pic{ * ^% U1 C5 ^) ^# C' C" w& k3 E
margin:0 auto;
7 W1 V' ~" u2 K width:800px; ; S# Z! d6 y" C- Z
padding:0;
0 L7 _" H/ N6 G! ^( m4 Y, z$ Z1 W border:1px solid #333;
! Y) i2 n4 b E% x7 d; `3 I, E }
3 |" A" B. @0 j9 X* K/ k+ b, W#pic img{
6 }* N q9 U3 s% L% G+ r! l max-width:780px;
7 _6 w9 d7 H3 ?" \: Xwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , p* J* p& p. @! Z4 K. e' S
border:1px dashed #000;
2 y: ]5 Q" V4 D* y5 f}
G" L. s8 |$ j; `--> Q, G+ n3 E2 T1 G1 y- E9 D1 H
</style> . A7 c* [$ P$ S/ i+ p. w" t
</head>
& b- z/ \4 j+ J<body> . D9 r. q% ^% A( @' I$ i& G N* g& {7 c
<div id="pic">
V9 `6 D+ }6 b3 m0 k: B<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; l; E! F: D: x" l6 Q
</div>
' L1 K# j! [( r4 w( x' x- x6 i: b</body> % |- n! `$ r3 u7 s4 q* D
</html> |
|
发表于 2007-12-8 14:55
| 