|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14163
- 金币
- 2372
- 威望
- 1647
- 贡献
- 1320
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。7 i+ _# D- h' e- k6 D0 a Y
关键在于：max-width:780px;以及下面那行。
" B P/ E- t$ f% }1 o, `" W固定像素适应:# g1 d3 l, ~( g B5 k9 R2 F) L
+ x1 |3 X0 d) g' l+ [/ F, 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> 以下是引用片段：
1 X0 p* m2 H0 T2 n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 d( [4 _* J; O6 i6 c( y
<html xmlns="http://www.w3.org/1999/xhtml";>
* z- A, @: |" K<head> : D+ c! ]2 ~3 f' U# p# N
<meta http-equiv="Content-Type" c /> ; r" l, }0 k" x9 o
<title>css2.0 VS ie</title> : @$ `7 K0 s1 ?; c4 y w6 t1 ]
<style type="text/css">
0 \4 ~( I4 P/ R$ G; O9 o- W<!-- ( C0 o4 y% l( V, |& u
body { 8 n4 I; t" b$ R5 q0 z% s
font-size: 12px; 2 L; k7 i7 }* V/ d
text-align: center; 7 W% g) h( J% c, D' l
margin: 0px; 0 S" n5 l$ R1 J0 j/ ~
padding: 0px; , c! r" G0 @0 G% W7 f. M$ D7 `
} : D, M; Z3 e6 M! J' a1 g
#pic{
) w5 E7 K# q! B) }; L% Q margin:0 auto;
) T1 l1 c8 S ]# W2 A" A E, b width:800px;
+ }0 w; V& c! Q* Z: v6 U2 x* B padding:0;
, B1 J& v# W& g3 H) A5 X border:1px solid #333; # P* p n* x( b6 k8 @' K; I* Y1 T
} 1 [; \/ @7 F9 j& ]
#pic img{
g! j R/ d$ S; b+ I max-width:780px; ; x- P8 c$ y* i4 H8 m
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: W1 d# N( e- r3 ?: E' Lborder:1px dashed #000;
0 [6 j! C( _$ `; T2 y/ R( H# r} 0 M7 g4 u3 @5 E# G+ _6 A% B
--> - v$ d& ]0 y5 n& W2 B
</style>
: z5 S% ]9 P* t, j; c9 z</head>
7 ?5 N3 I$ r: b& q4 w<body>
4 t2 R- Z: p2 _6 o* M<div id="pic">
. K5 J! ~7 p' ~% a' J& z5 F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( A. G2 R0 }! z/ C) C+ i" k
</div>
) {3 H8 |0 \; s</body> $ ~7 D! z% j: ^) c, V" I
</html>
. ]. I' c( E D5 ?4 k5 b! e) c9 V$ z& V- [ A0 r, f& K
百分比适应:" L( q, d5 t7 H$ ?, P% Y
以下是引用片段：
( f7 A* V+ u' D7 l<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 [& j. F8 e& b2 }
<html xmlns="http://www.w3.org/1999/xhtml";> . z" y n; q: H X5 m
<head>
( ^( k4 G6 x1 I<meta http-equiv="Content-Type" c />
- Y S2 P# r! S" o P' d M% D b<title>css2.0 VS ie</title>
1 C6 v2 s( S+ J) g7 i* y# \<style type="text/css">
0 m6 K, ] @! L6 a<!-- " n) i2 _2 g9 g% u: |. V {
body { & B' X2 H3 K$ H4 @8 ~) _/ R
font-size: 12px; H- {2 j2 K) E) F
text-align: center; : T/ q O, b" k1 B
margin: 0px;
/ ~4 s1 g- n7 u, b! D- I- @padding: 0px;
" S5 t4 _$ M a/ o8 {- ^} 7 y4 W' X, H2 H* z4 V
#pic{ R6 W# D% R% s; ]4 i
margin:0 auto; $ E# n, R, r) U( |- W0 p
width:800px; / k2 U* }5 O+ c$ C! E
padding:0; . l7 j4 W6 L. Z! @) v: h) e7 C
border:1px solid #333;
4 X4 T u3 Z- z2 H4 W% ] }
3 { z9 N* `( D% V: k#pic img{ + T( y. R' s8 \9 d0 G$ O* j
max-width:780px; * j* r. K0 v Z+ ~5 S
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); / U+ q. b& ^/ x! G
border:1px dashed #000;
4 Y. A" p6 i9 B% J+ a} ; u) E0 Y8 p- q4 @6 r' X
--> . u7 R( p5 o2 P4 K* [3 {* J
</style> % {, b# ?$ Z' |- w5 K& q
</head> " s8 Q, w9 ~* Y
<body> - ]7 _* y; u: G+ N z0 C" ]: f5 n. ]
<div id="pic"> 1 x& [; h) B) ?2 A9 [. N9 F8 ?/ o
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & N+ {8 E( o( A2 ^. i$ y
</div>
" a' n1 f2 N* r</body>
# _: f" M# u$ e; F8 ]0 c2 H</html> |
|
发表于 2007-12-8 14:55
| 