|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ r( s- k9 Y2 r6 R
关键在于：max-width:780px;以及下面那行。
+ p9 b+ h% e) e) D固定像素适应:$ [* d9 @- ~3 _" B
' m0 L5 X: w+ 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> 以下是引用片段：
I8 T$ }9 Y+ d0 L/ a4 `, x<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: \# z1 m) q. @<html xmlns="http://www.w3.org/1999/xhtml";>
9 j) m1 }. [* o. n3 d) }, Z<head>
5 L8 _' `, |/ c, W! N3 r<meta http-equiv="Content-Type" c />
5 k8 v$ f o( y, ?9 X<title>css2.0 VS ie</title>
4 A- M3 w* \$ A# p* m! S! k<style type="text/css">
/ h2 T+ @% V( M( h<!-- * a; L/ g$ m% w% _2 j1 L7 h
body {
# X1 Z# D6 ]% @. ?( e3 Q2 Efont-size: 12px;
; Q3 K- \8 O* O' D+ O& l$ I9 K2 dtext-align: center; ; A3 s2 Z" s! F1 X' H/ N
margin: 0px; 3 I3 v p! c7 N- C" e& M: [! E
padding: 0px; 3 t1 u' G% w4 \; \2 `
}
: n: m6 o' [- m3 M f#pic{
3 y! b+ P0 ^& ?8 ], _- O' k1 y margin:0 auto;
2 @: E/ X2 d# o( S) o0 C width:800px; 8 X( ^3 v- N4 D7 C. A# Z6 S0 N
padding:0; ! H( {( G3 w. L& ~& M$ t$ E6 }
border:1px solid #333;
6 T. }& N8 V6 S2 K$ M5 W }
" \4 N+ |: P9 S3 Q( R2 M- q3 w#pic img{
5 {& q$ z8 X2 H* p7 [9 W2 Q max-width:780px; ?# y# n0 t1 _' q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& E( O2 C( r; T2 kborder:1px dashed #000; ; f& m- x0 D" Z& W: F$ a
} 2 c3 Y" }+ h/ n, H8 H" K: y9 Q
--> - o, M; T) }) x) J, b2 A% \) U; z
</style>
g, @& h) f2 S% G1 p, f</head>
8 J' c" ^/ K- J/ r% _<body> 7 O4 H3 g. h- ]. T! a' V
<div id="pic">
; S7 N" i& I9 U4 h. [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ b% D+ J1 N! N5 N P w$ e</div>
7 d3 t D+ _% h6 {</body>
' y8 w( l2 s6 i9 Y. ~</html> : T: A# C8 m, h# S/ J# d, v5 v: @
6 u- g9 |( c* `# {/ q$ d* I* ^
百分比适应:- @& l: N3 i4 W" K4 o
以下是引用片段：$ j; K4 P+ a2 C% d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . L$ y) E, O6 B( ^0 V/ D
<html xmlns="http://www.w3.org/1999/xhtml";>
' w! {% U3 Z; M; U! `: k<head> 5 \9 C0 B, V" D3 C+ |' D
<meta http-equiv="Content-Type" c /> / H1 T+ S: x3 b' x
<title>css2.0 VS ie</title> % j; I" L$ P3 t- C
<style type="text/css">
' ]' ~" {0 |1 k0 x$ S<!--
, I4 U) ^6 x8 {4 E& L3 O9 b& S) |2 y+ `body {
9 d1 r* Y' ]) \( i [7 ^% g5 mfont-size: 12px;
& B# P1 [$ k" X( ctext-align: center;
" W8 v. i$ n9 ]3 fmargin: 0px; ' f- m- X0 r" l% H/ i C" ~! T- y" j
padding: 0px; : F$ d; c- c. \/ _3 z; |
}
, ~2 F' N6 c- c/ m4 `. O# P4 x3 \" [#pic{
4 W a4 a l0 R! Y, ` q3 f/ ~ margin:0 auto;
& \/ U( I) s* _2 Q1 Z7 j width:800px;
: e& d; Z9 F# I8 |& {* N, h0 y padding:0;
9 s1 [' @: R/ _) l5 s+ _/ V3 _8 ^0 L border:1px solid #333;
; Z% s1 Y/ b4 M' e' W }
4 V8 L- X1 q6 g- f" D5 E9 a4 T6 {. R0 C#pic img{
6 N: X, b& s9 \ max-width:780px;
$ i( ` i8 W: Ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 5 C% P2 U0 o% J3 E
border:1px dashed #000;
, e d! m( V2 _6 \} 2 h( x2 x" B$ F( \8 ?5 w3 K0 c
-->
& l' i+ N! k& ^1 _7 C, d; `</style>
4 u3 R2 v" j9 F3 F$ Q5 |</head> , D1 ^" Q0 w, B$ e: f( [
<body>
. A+ `* |+ d$ W, Y7 l+ `<div id="pic"> , v' T U3 i3 [" t
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 z: U, y2 { r$ t</div>
! {6 s9 Q0 e4 ]' \# s% ^ K% O. r</body> k$ L( C2 U9 r N2 {- U* w. o
</html> |
|
发表于 2007-12-8 14:55
| 