|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。4 Q4 W( Q: [9 A
关键在于：max-width:780px;以及下面那行。
# s, S: J5 H6 @5 ^0 _( l; W固定像素适应:
. W! Z* y; }$ R8 O- A3 O( v! h; V8 z; {, l) Q2 O% Z& [) N) N
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> 以下是引用片段：
$ ?. p6 A/ L/ K, ?6 }3 |8 }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) D9 U5 A3 m+ ]% V4 ~
<html xmlns="http://www.w3.org/1999/xhtml";>
, S% |9 Y3 L+ u4 u. j" ^5 i<head> ; X1 C& ^$ ?" `& g* _0 `
<meta http-equiv="Content-Type" c />
( q% ]/ t6 v0 m6 g. Q, @7 q- R<title>css2.0 VS ie</title> ( G/ @: S6 ^" A |1 C$ f
<style type="text/css"> 1 u n# s m. r n/ s* b* o( l
<!--
! r1 ]/ l! a. r7 [( mbody {
1 R, h9 S0 [2 q/ b1 ?: c0 bfont-size: 12px;
7 c* `9 G& L0 x, u$ \( J* L) gtext-align: center;
% z) G3 ^1 ]0 B/ A# Rmargin: 0px; - u2 s! B$ N0 t# i0 r! M
padding: 0px;
9 E: f0 J% v& X# [1 g) W}
, F$ l- Z# x9 k8 Q2 I4 [$ d#pic{ # P) C) K7 J& Y
margin:0 auto; 6 X) r: b9 k, e" d0 w
width:800px;
. g) @9 g3 b$ h( Q padding:0;
/ c' d* o. D4 S, k2 m) M3 j6 { border:1px solid #333;
. _3 z* | S7 X4 z/ x2 _) l } 6 p: s: H# s- B! x8 U, w
#pic img{ `& E7 E) Q( O/ P9 ^& w& \, [
max-width:780px; ; o1 t( ? m5 e* ?& f5 j& b- a
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 0 v1 u. |: y, z8 k: t: R) p4 i
border:1px dashed #000;
+ j, W3 p: y! g" [0 d}
" \' E4 h( F! u- w: N9 T4 N" H/ T-->
. T2 Y9 \3 V" J: T" W5 ^</style>
. K/ V9 l, I% v. ]</head>
5 W/ t4 }5 {& Z2 T3 W/ D: [<body> ; A" v6 h4 g; s! \! L
<div id="pic">
$ s. x" Y7 r% k<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 [! T, W# I/ B) U4 X
</div> 1 Z" q" e6 P3 B
</body>
4 @" T: `- C; [7 |' X% c</html> / N7 S3 [. H5 \2 |% T- H
& U- h5 P5 _) Q! `( B百分比适应:
! y6 }3 ^# K$ j9 j以下是引用片段：; y) M6 L l' j) C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! f) z7 e! z0 }<html xmlns="http://www.w3.org/1999/xhtml";> ) k3 |& b. d5 h8 ]2 J1 v$ j- L' f" V
<head> & z7 y: _! b$ m" q5 @% H
<meta http-equiv="Content-Type" c /> 2 R5 _0 g' b1 @1 W6 @
<title>css2.0 VS ie</title> % F- _7 c! |* @$ U6 S6 _
<style type="text/css"> 3 z* R" n! e+ j' i+ S
<!--
/ V8 }0 i* j; y: ~! h) q; W9 A' Wbody { - R; C ~( N, Y
font-size: 12px;
$ x$ \+ l& Q O6 \9 ptext-align: center; ) E& ~( X/ q) o2 e& m( \2 W9 D6 X
margin: 0px; 2 X2 J( q7 w4 X0 ?4 v, |( @
padding: 0px;
# h. f ^) A; V% h& F}
6 u8 O5 ]7 V3 J% L1 a: ~7 Z5 I. ^) C#pic{
# z3 ^2 m2 C$ n+ H( K: ]. U margin:0 auto; 0 b7 x8 d: r; Q d2 K
width:800px; ) g/ m1 Q7 s, O. _
padding:0;
% D9 N$ j, \ \) H' N* _ border:1px solid #333; 7 X! g/ _% ~4 w: k* E5 y E! ~
}
3 W- t6 s+ o% P2 z#pic img{ 1 x! I$ m2 E1 e: Y5 h3 L# o
max-width:780px; 2 d: j& y; Q( d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ) R) R5 S5 F# `$ Z
border:1px dashed #000; 0 U! E' Y3 J" s& S
}
m \7 n8 k. l& w4 |% s- u-->
0 g/ q J8 K4 q, R4 Z</style>
. D v( s8 \3 ^$ g: C/ i% H</head> 5 R8 \# I% y& C& f9 z
<body>
2 i O# q; A2 w. Y8 H<div id="pic">
3 ~# q5 E: B" a: }$ u) `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) t/ Z8 L. s. Y3 T6 p4 x( | p
</div> / l/ Y9 B u) @" W
</body> " Q# ~) T" H3 X \7 _2 e
</html> |
|
发表于 2007-12-8 14:55
| 