|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' W0 b! V0 U- v! E1 k5 N3 c关键在于：max-width:780px;以及下面那行。
+ W, d$ s3 `) I2 l8 u0 d6 a, B固定像素适应:$ `. J/ S; u7 Z8 K; c1 ^/ V
' W* _7 V/ N. E6 O( \ O3 S/ j
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> 以下是引用片段：7 R( o- n+ N1 _3 R1 z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 E: U5 a+ n2 [- J
<html xmlns="http://www.w3.org/1999/xhtml";> $ n2 ?% o* ^" A- O- Y, {8 |# \" Y
<head> A: b+ n' E: }$ y7 c
<meta http-equiv="Content-Type" c />
- ?2 ?2 V- \3 s0 B<title>css2.0 VS ie</title> ( R, n' p, e/ D; g e
<style type="text/css">
# e/ |* m- B' s! S9 e7 w3 Y! k<!--
b" }, A; v' j7 x0 o% m7 Gbody {
# ~0 B% H; r. o2 n, `9 F7 lfont-size: 12px; 1 p5 {4 ~& C. {; t% V2 A
text-align: center;
9 a! a: o& T" s3 i: D$ w5 ~. j- Vmargin: 0px;
5 W# E4 C2 q: J' b! Z9 kpadding: 0px; , P) v- ~) u' X' [1 b
} ; u9 ~. C: L0 r v+ W( S9 @
#pic{
. Y2 [- O9 r1 e$ t8 _ margin:0 auto; 4 p" p+ {+ O% `' ?0 n- P
width:800px; - L- U8 g1 X9 _5 \" F9 X- j
padding:0; * |. f. R! x; M: j# \. U' Q
border:1px solid #333; 2 p9 Q. p. h% U) \8 w% y
}
" b# S/ X! D& N7 \' }% _% d) [#pic img{
" ^& _; ^& Y/ n max-width:780px; 2 ^7 r4 T8 G1 K
width:expression(document.body.clientWidth > 780? "780px": "auto" ); + q) i; U- I3 Q$ t+ n
border:1px dashed #000;
1 `6 T2 ^9 [5 d3 n} 7 ?( I4 W5 o0 Z2 a: ]
-->
5 o1 }3 l+ s6 z$ U4 G</style> 7 t0 u$ T: I$ b _. f7 s) k
</head> + Z- E2 _" m* b6 T! {( x& G
<body>
, P1 a! n: H! i& @<div id="pic">
0 G8 ~4 ]. P5 R6 E, F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) {, `6 r( z8 l/ P I) _! M- p
</div> 7 W+ v4 w$ h/ u: i7 \) \
</body>
* ]& y' }/ D" m9 x n1 o+ U</html>
t3 @; `6 P5 l5 _+ j/ i9 G/ s, @1 ]
! a% { v( I/ m( N2 [$ N百分比适应:
5 e( a; f6 y$ D, C以下是引用片段：% M; R3 m) u4 E& d0 C" _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + c. A' j" o5 f+ h
<html xmlns="http://www.w3.org/1999/xhtml";>
: I( M1 Y$ n* i# d& U<head> 9 Y6 n, y! B. J
<meta http-equiv="Content-Type" c /> ; y7 s* U, W4 u! @0 p* \7 l
<title>css2.0 VS ie</title>
3 N5 l) O9 u/ x0 C- `1 l ^4 I<style type="text/css"> # o5 t! y8 T# {2 v
<!--
$ Y$ u6 B% a& w1 `body {
7 ?+ {% ^- ~1 u5 \font-size: 12px;
: R* W0 X$ H3 ~6 |$ _6 i) D7 @" O8 vtext-align: center; ! ?/ Z& u \: t4 j5 h4 a
margin: 0px;
5 ]/ ^4 `/ N2 w8 D5 z B9 p: Rpadding: 0px;
" _- Q4 P. _% I) l2 f1 I0 r}
4 v) H( t" x2 `0 @" M3 w7 F#pic{
+ p9 L. j) h5 p2 p- V3 h margin:0 auto; . x' ]% K. M. \# l
width:800px; - i. ^! `. O8 z' ^, }$ B
padding:0;
& x O+ @( j) \: u: f$ k border:1px solid #333;
/ q1 C% M# O' K5 Q6 w }
( V. C& t% {% `% q/ q9 _#pic img{ 0 g3 [: P0 v6 T( |. e) t6 o4 g
max-width:780px;
! ?: m0 \: C! j$ O4 Ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 J# d- O. u+ K2 lborder:1px dashed #000; ! w- a& |/ r$ L, G# P4 y& i4 S. e
}
( p7 L- J% }' z' {/ D-->
6 P6 j! Y9 H6 Z( }* v- ~& J/ b8 b</style>
2 N7 J2 l! E, e% u# q' T: }</head> 3 T: K! b: \- v Z
<body> ! O/ O* T% @3 a6 u( R4 j
<div id="pic">
% Q0 y& W3 t- s# C; O% J<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # r; k' e- f, `' a5 x
</div>
. y7 c2 g k3 o% x3 O, W3 }</body>
; y' x4 R# |. J" X& ?: J( ~& C</html> |
|
发表于 2007-12-8 14:55
| 