|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; U H! i( t( b* t( N5 q s ~! M关键在于：max-width:780px;以及下面那行。
5 N& c5 |: o, ^8 h! i `. q固定像素适应:
% z' w5 G- f% d- Z! w: u3 e( H3 j' O' ~& H( w
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> 以下是引用片段：/ m m* r# i `( l0 @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - |; j4 j Y, s( O
<html xmlns="http://www.w3.org/1999/xhtml";>
/ V, j: i+ g$ @8 ?8 W T. V<head>
8 Y0 z2 Z4 B( t<meta http-equiv="Content-Type" c /> M( X- K% W7 D
<title>css2.0 VS ie</title>
. c) J! P5 f0 ]* h<style type="text/css"> 1 K; R" n* r# Z0 J& B
<!-- 2 z* {$ o: P V9 P
body { 8 U. S" H# N- w
font-size: 12px; h" y# [' u3 ?; d; m9 S8 P
text-align: center;
) t! I6 v8 P# R9 p6 Emargin: 0px;
) E* Z0 M' P9 W$ Z3 Gpadding: 0px; 0 Y5 ?" n9 m' q% Q- l; [
} 0 D4 P; u" [ A( j% r- R
#pic{
4 N3 k! ]; K" M9 I# x, Z# L margin:0 auto; 4 |, S+ J- F: V; l0 T0 h6 Q
width:800px;
# U- {" G' G1 w: U0 X* J padding:0; : N# ^1 E2 Z8 Q
border:1px solid #333; 0 z) B, ^ x) m/ s. t+ }
} * N3 ^% t" U! L" X. k" B2 ?& u7 R
#pic img{ , o1 m M9 \, n& W/ v8 _
max-width:780px;
% L0 W) o. p3 l. U4 v+ \6 V+ u8 Zwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
4 l! Y9 q+ Z' u2 X/ cborder:1px dashed #000;
0 K2 S2 k- }8 }' U" U1 p" L9 p} 8 U7 [8 L- v* b* c0 W
--> 7 G- _( j: H8 F6 f8 }& D
</style> 2 k8 g" C0 ^ P& _% X8 j5 i& p
</head>
9 A! h2 w" J# C" w% ?4 s2 t<body> 7 T0 I4 G" o: k2 M4 ~ t: w
<div id="pic"> / f$ a y; Q' {5 h" z+ b6 ^: g/ {
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# }/ V: ~! y: U* @" |+ y! e2 m</div> 9 M! Q4 I: }0 M4 N+ O! i) Z$ Y
</body>
/ I% z' | Y; ]1 c: y! v* C</html>
# K9 n. M R; @) b# c* k/ O8 j! u; _: P% ]
百分比适应:6 J5 ~, B# H# b: e. e j0 {
以下是引用片段：7 l+ A0 e T+ F9 y8 Y0 L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 X/ ~/ z7 J: C% ?<html xmlns="http://www.w3.org/1999/xhtml";> * Y7 m0 l" G1 n# ^' @
<head> 9 I2 n6 {+ [: o J0 Z& R, |
<meta http-equiv="Content-Type" c /> 5 x3 ]' j/ q" w b
<title>css2.0 VS ie</title> # ?2 m% p7 ~- X* R
<style type="text/css">
6 j; n7 h7 _" t3 i<!--
7 h( n4 y! }* [ y6 ~body { . h6 H) s( l: \! B
font-size: 12px;
3 T/ D0 [* \3 J v1 ntext-align: center; ) n! g; A& ?; Y
margin: 0px; 2 {1 ?4 G$ K2 e; l: P6 g6 z: z, D$ V" M
padding: 0px; . p8 F9 {1 ~# z
} 6 b( T* P) k( M9 {, a6 |
#pic{
0 ]3 _5 D( o" ~% Z margin:0 auto;
/ [; z! y6 U# R/ y6 [ width:800px; $ {. U5 ~( s+ r- j4 v7 [
padding:0;
- h2 ~1 t% O4 x2 N1 B1 J border:1px solid #333;
- P' ~4 F* _* I$ Y7 F }
7 U+ H) T1 C5 X+ Y0 u#pic img{ . b! q/ W E( q* d; [/ F, m
max-width:780px;
4 V+ F6 Y8 Q1 }width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 K$ u0 r. u2 tborder:1px dashed #000; 3 ~& u, \2 a: S, Y
} % V) t' l0 Z- g% N& s) W) q4 f$ S
-->
" n! @0 z7 m0 y, e, I' h</style>
( f8 z* M4 d: m! |( \0 r</head> : ?0 _( p1 I H# k5 G8 ]8 Y$ t
<body>
4 |) h6 T7 M: h+ r<div id="pic">
0 {* V% _; Q M0 K4 m4 H<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ S5 N1 ~3 Y- f4 I1 H: E- x</div>
. M; Y5 L- q0 _</body>
% I8 B, B$ f: H( a: G u5 j8 O</html> |
|
发表于 2007-12-8 14:55
| 