|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* K3 v% e1 b) Z- m5 b9 ]- b
关键在于：max-width:780px;以及下面那行。& u! V* J7 Y2 Z: M6 _
固定像素适应:
' l4 T9 Z( \$ P$ h9 C3 M% g( e {. U4 [
: _# m+ ]* S; X( w5 Tdotted; 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> 以下是引用片段：; \; x, V# Y6 }, t/ T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 {, {* l5 H4 ~# N2 W
<html xmlns="http://www.w3.org/1999/xhtml";>
5 ^/ k9 U( c8 ^" Z! U+ f( K<head>
, ?) t# f) U+ f<meta http-equiv="Content-Type" c /> ! E* g4 v; d' r# i7 x. Q
<title>css2.0 VS ie</title>
5 U2 `6 c2 w* l {<style type="text/css">
2 y2 W3 F$ z. d* K( l<!--
2 H3 e; X2 @. @. k% ybody {
z. ^9 I( Z; Gfont-size: 12px; 7 ^- O8 y# l: J5 R( @7 F
text-align: center;
" |3 j, _' D# q. t6 [* ^! Mmargin: 0px; ' s/ u; G# M6 O* A i1 g
padding: 0px;
! U* F% P8 h- R* z} 5 U" m8 _* H- D* c% [: s
#pic{ 2 q% r& ^& U6 c) F2 [+ f- }
margin:0 auto; 9 H# H3 I. C* g& q% l$ M, Z
width:800px;
* U7 n" A7 q9 K- g; m) y* d0 g3 [ padding:0; / K" s8 z3 h+ _4 R8 R+ P
border:1px solid #333;
9 n/ s* y* {( {+ v/ r( ?8 Y& d, N } ' J p% O4 b. d9 A, |9 [8 N2 F
#pic img{
) f8 W7 J" ]; _0 ^, S3 l5 f. z max-width:780px; 9 ~7 f8 k; ?" v9 J3 } y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! g7 o) G6 c" m3 D( A, a; b$ nborder:1px dashed #000;
3 V: _3 S7 @" W+ O' S}
- o/ I2 ^5 @( s8 v--> $ t/ k9 a! e" {2 v! `) O) Y
</style> 3 K& l- \2 j7 ~
</head> ! U8 j, s% s2 K1 a, p2 g, H
<body> 6 {; c! R- K' I3 d; q2 E
<div id="pic">
0 d F2 K+ q; c8 L! Q& i, E) T<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / {' H% h9 M. x" j( O$ B
</div> . C0 c# P$ B) M8 N& A; c2 n$ n
</body>
4 I5 R0 I0 D/ f+ g9 S& C: b</html> r$ M+ ~& N' E; l: N
0 t! i0 T$ H$ \& X; T
百分比适应:
7 W- S/ ? P* ?/ b# G以下是引用片段：5 W. ]* Q( X6 g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 B, S# U7 Q+ p: b' e; g: u! `
<html xmlns="http://www.w3.org/1999/xhtml";> + K) u, C$ A& d/ C3 o
<head>
# g) s5 g) X/ g+ p<meta http-equiv="Content-Type" c />
3 E6 t. N1 W$ V- ]# ^% H8 B<title>css2.0 VS ie</title> / C: P0 W a, i0 }* @* G# @9 k
<style type="text/css">
4 u( Z) o: B0 p! S& y: @' G<!-- " u, f0 a) ?0 u- D6 R. J" H
body { ( z6 E4 ]% P3 ~& _ b* S5 D
font-size: 12px;
" m( v2 ` z* j9 e3 Ntext-align: center; 8 {" L! j; g V9 l, ~
margin: 0px; ; U1 e/ J$ z8 I6 H, V
padding: 0px;
1 D, V, f5 ^$ C3 O. b8 W# x2 `7 T}
9 }/ [* e! J& t. e0 L. ?9 q4 q#pic{
* b) F9 Q. n' ~" j margin:0 auto; 0 U9 T8 r( ?) `$ S( D* }
width:800px;
2 ` o4 Z. {" D3 D' k4 ^: w/ e( J padding:0; / P8 L3 D e2 ~+ Q% u O
border:1px solid #333;
3 o- z1 s4 G1 @ } 8 ?% C/ j+ V* I0 ~# ?; ]
#pic img{
# d7 N4 i3 h0 d: G; v, O6 o max-width:780px; 7 o; j, J7 t0 W, R6 W/ y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 A; K! b: l( y% R- }( Yborder:1px dashed #000; * x/ O# Z$ q* q1 `; G# Z
} : _$ w: V( T6 ^8 i
-->
6 O% U; J. k7 m5 A+ s</style> : B2 J3 j( v9 l) i5 q- s+ B
</head> $ l" n$ p) c& p6 Y* Z
<body> * ]- h( _. ^6 v2 J
<div id="pic">
7 | d& ]; d2 O2 n<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 `' G' ~# e0 z</div>
, V- n* ?! X+ U( i2 c9 K</body>
( q1 h! V! ^1 G, n7 Y, s</html> |
|
发表于 2007-12-8 14:55
| 