|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。6 _& ^7 e2 ^1 I
关键在于：max-width:780px;以及下面那行。
' e9 F- ?+ O" H! q- T4 C" j5 U固定像素适应:; U3 L8 T, W- J7 X0 k
8 X# Z8 ]# v2 z5 m4 S1 odotted; 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> 以下是引用片段：
2 Y/ B: M! R, t) J5 |. e<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " ~% j' x3 Z+ U2 t
<html xmlns="http://www.w3.org/1999/xhtml";>
5 ^# n( q5 P8 a2 r& ^' L<head>
( g0 a5 z% g( O6 b3 w) x<meta http-equiv="Content-Type" c />
' j1 \4 ~# w- L: @( g" o# k/ b/ H* ~<title>css2.0 VS ie</title>
# b$ d- k9 i; l* `<style type="text/css"> 1 B' Z- B Q: d1 N3 w
<!-- : R2 ?! K8 |1 B4 O' s( T' b- L
body { # \% Q, p; M: ]9 M# c6 K, L
font-size: 12px;
- @2 |; a: c5 f! L. L. ~text-align: center;
2 r2 p; {6 Y4 o& E+ X ~. jmargin: 0px; + t L# V0 U2 B, W* P
padding: 0px;
# w9 `, b5 ]) I. h& x} , @* a7 y% m7 B
#pic{
( |' ]2 v' S' B margin:0 auto; - O9 h4 @! F- ^: g, [ q) {
width:800px; , h2 f0 o. h4 U: h/ b
padding:0; / [& s, y, p4 g X0 r' V
border:1px solid #333;
. [: L8 A: _$ `1 C }
: ?& `* _# m/ E& b#pic img{
' k, a9 m, ]0 M8 ]& H! y, X max-width:780px; . E6 |9 E7 l1 \; K5 s
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 1 g7 Q7 D8 [) p p6 b
border:1px dashed #000; " T; f) h7 Z& r7 h; Q3 [
} 6 P* _1 t0 J) |
--> 3 D. Y( k% e, W( C# u+ @
</style> * L6 W7 `0 w% m0 g7 \" m
</head> 2 ]1 T) t U3 F/ R/ h0 ]+ T3 q
<body>
9 V& f3 j+ B, r7 \<div id="pic">
8 U6 \* z9 x, o) a! L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 g4 s6 j2 B( a& f9 ^
</div>
, n0 Z, K' x, i: F</body>
`: O' a3 V n# U& d, Q</html>
! M- I5 m7 F9 d4 c, s k& ~
" G8 C* x9 N( ?8 O: G3 Q百分比适应:
& N: M9 r E g1 p以下是引用片段：
# p+ l7 y a8 {- r( U2 m: A5 ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ t) b9 e- ^4 }: v" w) s5 R7 y( K6 f<html xmlns="http://www.w3.org/1999/xhtml";> ) H4 @4 I- j. f% l- h! X8 x
<head>
% N' o5 Y9 C! }3 a9 w2 K! ^<meta http-equiv="Content-Type" c /> % f' T& e: v X' G9 [
<title>css2.0 VS ie</title>
$ L. p! }: s9 C<style type="text/css"> - ]" S! y8 h! b# g) X7 k
<!--
" Z3 I8 G: q& W% N( v8 b6 ?. F$ mbody {
: G) |8 o& S8 U- d H! x9 {font-size: 12px;
! h' h' {3 ?- D, f: }text-align: center; ! f) W- b. C+ P8 A6 |4 S, g
margin: 0px;
. {$ S$ k1 L# C9 @# }+ p8 Ipadding: 0px;
) k: ] W) _- ]3 q% W6 r} ; {9 O! l+ W. t0 c+ J
#pic{ 3 v7 _. A4 y" }. ], _1 K
margin:0 auto; * U" v& r9 I* F3 O" q4 M( ]
width:800px; . M6 W2 V5 j& C; D$ n j1 k3 r
padding:0; : K( i* J0 u* |- ?
border:1px solid #333;
' K( M9 [1 |5 d } $ b& t+ q( M' Q+ ?) S
#pic img{
! D# u, d% v" {' L" J max-width:780px;
$ `8 Y6 W. y5 T' J- u- dwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 C% S4 C9 X7 u2 H8 yborder:1px dashed #000; ; e9 e" |& ?7 Q" c A. _
}
, |" d0 Y2 x6 z! L--> ~2 r$ O2 [" R$ {" b
</style>
# _$ H3 J4 G5 |# A( u. A- s( r0 t</head> $ V2 L2 b: D$ q: k7 A! a+ q# o
<body>
C" ]0 N- D; I1 g1 L& Q<div id="pic"> , o, h R3 S' V: o) B& q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ l# O) _% @) l% g
</div>
6 k' t7 C4 x- ?8 `</body>
7 k S0 z/ R0 x& y" a</html> |
|
发表于 2007-12-8 14:55
| 