|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。7 G8 s, g9 N5 K/ a& b" z' G& S
关键在于：max-width:780px;以及下面那行。
: F1 C( L6 m# x. n1 s固定像素适应:; |- j1 O8 l* R& u
! P1 q. W& F' S0 |+ ?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> 以下是引用片段：
" e0 W) H3 L( }: X1 Z, l5 y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . c3 \; K5 I1 W( \$ Z; V T
<html xmlns="http://www.w3.org/1999/xhtml";> ) y' v. b# Z+ D9 W
<head>
* e# O$ ^9 u) e3 e; K8 E; c2 f<meta http-equiv="Content-Type" c /> . c/ N3 l; x! M: P# S7 ~4 z
<title>css2.0 VS ie</title> . s% V! L, b- U/ [
<style type="text/css"> % Y( D% h% I L' H; d; L
<!--
7 }* O3 ^7 G( Z) D3 \# v- Sbody { ( w- U$ J* o. I+ j4 J
font-size: 12px;
& B# `! j2 X) u* n- f9 }& U( B6 Rtext-align: center;
" T+ G f1 @* a6 E7 Hmargin: 0px;
8 X! k+ g9 P; U- G F, Vpadding: 0px;
7 K; O( v) ^3 F5 J4 c* d! s} . I5 @: f' R4 I" G
#pic{
/ D7 |5 m w7 k% f P b. l margin:0 auto;
q8 M2 `( | J- L+ \ width:800px;
' M0 W! @ n) ^5 Q" i padding:0;
/ t4 o3 i9 O& }" K, P; i border:1px solid #333;
. ?( g& o; [3 L) n$ |& O0 j } ) q j& E) }1 G+ W( y! D6 g. x
#pic img{
0 c/ I( K7 m* P& J a$ U max-width:780px; 3 Y5 l( m$ f3 w" B3 x: _! }
width:expression(document.body.clientWidth > 780? "780px": "auto" ); - G5 e$ ^& \: z4 y& f( y/ e
border:1px dashed #000; ! Q& b9 s- k/ u' A5 N! ~' N4 R. {
} ; ]$ f+ @5 o' R# M! q& x( J
--> 9 n [. v" E! U, ^' s, C" k
</style> * \' M' C; @% C1 g+ ~& X8 \
</head>
' \2 F4 A6 u" e: D; J2 L<body>
+ s; T t, y& p- s. J5 _: C<div id="pic">
. o& C r* x5 }) d) t: x/ e<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 W9 `) ]9 b7 C! U; _3 Z6 N</div> ( `1 R9 R9 O! P- q: L8 l
</body>
: s; |+ F9 Z- l1 \* ?</html> $ k) F! A0 K. p1 Q
2 r2 f4 e+ n. `4 A/ b( ]3 w
百分比适应:2 T* n$ I' \2 u6 G
以下是引用片段：: N( j( c3 ~5 O0 p3 @# G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
_ b! P" m0 i4 J1 Z, A: ^* i<html xmlns="http://www.w3.org/1999/xhtml";>
% f1 A9 p) w* Y) s<head>
9 Y. G% T8 D* u( ~" L! m# Z1 A<meta http-equiv="Content-Type" c /> ( u# K, u1 m! T- \+ `- _" h" O
<title>css2.0 VS ie</title> $ H; J& Q. B7 t6 n
<style type="text/css">
: v U/ y; U# r% N j' D! N/ ~<!--
# B( R8 h1 W0 O- ]body {
3 s! y6 \0 g; g: c) efont-size: 12px; 5 a. U. M, A. I3 B: X- x7 \) V, f3 x5 [
text-align: center;
# g' y) q1 n& Z6 u% I1 R- E3 {% h, Zmargin: 0px; 4 E5 m3 J/ W) z' ^# f' h
padding: 0px; $ i. j& I. {) u3 \- ~% r' A$ i% @( Y
}
. Y8 m$ `( c1 {$ v+ Z1 c2 y#pic{ " n2 g/ C! x2 D$ N/ ^
margin:0 auto;
5 h" q3 ~2 G, Z. x/ }( X2 Y# I width:800px; Z/ n/ i8 u4 i- ^$ ` b, x; C
padding:0; $ K) n8 ^: z, K0 W" Y( H
border:1px solid #333;
6 B4 O+ Z$ u5 R H0 T }
4 e! F0 `+ Q1 M* c* u6 k8 E. m: v#pic img{ 2 I4 @! p# P7 v: D( ]
max-width:780px; : Y: r+ L6 R! ~5 j7 e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ H( T6 C, |/ s3 p) l3 a, E( sborder:1px dashed #000;
" ?. p0 Z2 u1 G' {; M} / o0 o' C; C; i6 Z
--> ! D/ x1 _; E$ c6 V( P& e
</style> ?3 r" g i7 [! B- ]# U$ O( k/ }
</head> 0 d8 ~# F e: _4 h& n1 H; L
<body>
9 P4 j7 T( W( ~ y<div id="pic">
- D, D. v% }+ p* Q! \, h<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 ^0 m" `/ V/ n7 R</div> ) o& @( l" Q' w
</body>
) C0 b4 ]7 X- J& E8 p: }7 z</html> |
|
发表于 2007-12-8 14:55
| 