|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! j1 {& d5 w8 j% K' Y" h
关键在于：max-width:780px;以及下面那行。! q" v/ h {4 A- q! D+ B, \: G6 |) @& D7 h
固定像素适应:
7 d w2 Y8 l$ L% D! s* u" h7 }$ d, F+ D* P7 r d) K4 g* a
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> 以下是引用片段：, q9 i3 u0 m: \$ w9 x1 X6 W K" k* |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % S& v' m; I0 A, |
<html xmlns="http://www.w3.org/1999/xhtml";> o' Q' X/ t) j* p, z
<head>
7 n% M# ^/ A/ S2 T6 ]<meta http-equiv="Content-Type" c /> 8 p; I( m( k6 ]- [, e5 j
<title>css2.0 VS ie</title>
( B* K, n5 h/ C& G7 c: A$ U7 s<style type="text/css"> 6 B4 _+ k7 U/ u( d2 P, n1 N/ {
<!-- $ D' |0 |7 [/ A t, p, f7 Z5 x
body { ; X$ N, ?4 z: w, E3 i5 s: d5 Z5 i
font-size: 12px;
: }0 g0 B9 S; H9 P5 qtext-align: center; . @! h" [. [, ]* R4 A, ]4 A5 A
margin: 0px;
9 t. `2 ?6 Z- l2 m. s! r$ o7 Tpadding: 0px; ' n& J0 |* Y* k- S$ U* x2 d
}
8 V: z- E) P# b5 v6 F, j#pic{
" o! w9 p* J$ E; _! c/ v; ~* \ margin:0 auto;
* t/ o5 I% Y- t- w& q3 Z width:800px;
! T! K' w, ^# F' r2 `4 r padding:0; $ V, Y H* i5 r0 s& E# ^* {( p
border:1px solid #333;
0 T% b' w) B4 d4 i9 n% T# i2 r }
- }( B! v+ F1 H' b) ]#pic img{ $ B; G7 n& I. [" u! q
max-width:780px;
+ d4 I( F9 D% z, R5 Iwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
- ^) I8 |' ]9 C7 Z# y! kborder:1px dashed #000; * l0 S5 \' n9 D5 M/ i. |
} ) O9 i6 B) S& b
-->
& r# d( {6 B0 O6 D2 C+ B3 L" l7 Y6 E</style> 6 l' b% u; v8 R0 a0 E
</head>
: A. ^& X" f+ ^0 n<body>
" h; v; \9 e+ ?6 r4 C<div id="pic">
: m. n+ i* B) o8 r3 W( z# ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 W9 w! M( s. a5 g</div> ! X$ t) R+ G% A& u& e) b
</body> 5 P, p: U \- m# `3 ]
</html>
; t1 e' g* Z, t7 ~% R) l5 m" U6 u+ x. H' r9 C% S; D% |1 O
百分比适应:
+ {! a) s5 z# m/ B4 q$ G以下是引用片段：
/ n2 n+ U+ h% x2 V9 }4 n7 J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 z. h& b8 W6 b( e<html xmlns="http://www.w3.org/1999/xhtml";> ' b3 P( }" l I; g
<head> / M/ D- Q# `& l6 X5 q( ~
<meta http-equiv="Content-Type" c />
8 U; h# c, `$ J3 {, B6 E9 u3 U# F<title>css2.0 VS ie</title>
$ I- l5 {4 A, c% S$ \<style type="text/css">
0 G7 h* P; n% r9 {' v) m<!-- 8 J- C) j2 _- g4 g7 r! U
body { ( O4 h1 R) w8 E. J. Y$ U
font-size: 12px; % S/ u3 P* n) ?4 i' T2 n
text-align: center;
X( e+ a0 E1 t$ E2 hmargin: 0px;
/ b/ l0 [. U9 u4 \: Ypadding: 0px;
6 s' l9 M* _$ D+ u1 ]: o |/ B% y' P} % ~* c7 n) }" c v6 r
#pic{ ' @" k5 T3 A5 M$ J0 F. v
margin:0 auto;
7 ~. p' c' W3 C' a width:800px; - r8 h, W4 `# u" T0 m
padding:0; # t' H; |, d; \2 N! \
border:1px solid #333; & G9 p! a. b- y* d4 e; d) i
}
7 W+ S* I" b& ] ]1 U#pic img{ + q, E" x8 A/ }, ~0 u+ X2 E" Q5 M$ [
max-width:780px; ; b6 x" {7 ]& \% _$ ], Z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); - b; N4 i& n- |
border:1px dashed #000; , l% Z" Q3 \ U, n8 Q- f' z* }
}
1 X) F/ H: X/ X& V-->
' ^1 U- {: n1 a8 f3 b6 M3 Q</style>
4 J% c9 q/ j+ ?1 S0 q</head>
. v/ ]5 l* M5 e0 U" W<body>
; ~4 `+ J) ^) `3 ^5 y9 L<div id="pic"> 8 e7 w/ n& K3 { W. {9 N ~' h
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, i/ {; I& L+ z6 \ r. R1 {</div> 9 x7 Y# [4 t3 r
</body> . X+ |8 E8 X/ }
</html> |
|
发表于 2007-12-8 14:55
| 