|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: K( c- h/ k/ F7 z; f关键在于：max-width:780px;以及下面那行。2 Z( A. S; {2 \5 L; f% W
固定像素适应:
: [, \! m/ e- {- l. a
: B9 |- @, X' O5 Zdotted; 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> 以下是引用片段：
' A- y8 g& b! m# ]: e<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ( ?) D; ^% }, b! a. Y
<html xmlns="http://www.w3.org/1999/xhtml";> 7 E$ _/ B9 D( ~( c. Y5 ?
<head>
) }; l" ^7 w7 @9 f1 Y# X% L<meta http-equiv="Content-Type" c />
) K. f, ^" d) k2 ?) x8 T9 s<title>css2.0 VS ie</title> 9 [! I/ T/ I; |. V# ~9 b
<style type="text/css">
4 n. P' `' _+ B; a$ S+ L<!-- 4 K2 i2 V1 u6 v6 ]4 K$ A% ]! P4 m
body {
( ]- R {. |/ ^font-size: 12px;
. C. }2 U( N3 u7 I8 Etext-align: center;
* D; Y8 A: X; A. Nmargin: 0px; $ O/ w' |; n4 j1 {( y( d, b6 P, X
padding: 0px;
1 _1 d& `& |% B! V6 n, p. V, p} / z# X9 y4 a0 z7 y
#pic{ & h+ d* i6 w7 h- X
margin:0 auto;
' J8 f1 u% F. N: U9 I y# z+ n width:800px;
" v9 [ A( R/ Z# x! }& \4 i) n padding:0;
5 V T* J" i8 Y- u border:1px solid #333; $ G. V: Z7 I3 _1 _% `
}
2 S1 e, n3 W& b, y; `#pic img{
" p3 `$ ~4 @" V# d- w4 r. { max-width:780px; ! ~) j8 N2 r. r0 a
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ I# } \, ~; m1 cborder:1px dashed #000; $ j$ c w/ x8 M; [* ^9 p
} 1 h+ B1 [' ^; g# Z
--> \7 R8 G4 v: }8 H3 R
</style>
! Q' ^# P F' _ y" |0 V</head>
; y) T) @9 j$ {4 P# O, A2 e% `<body>
; a9 i" }2 s( R \4 J; T! }<div id="pic">
2 @- ?! g, l% Z% w<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # n) U# z$ q( x! D7 i0 T8 ~4 k+ s
</div>
. d5 I; H9 s6 |4 D3 b</body> 3 S& q. Q# _ p" m! i
</html>
5 N) X4 d% g: n# D
$ p2 J. h4 Z* w( X: e, t7 J$ l百分比适应:
" h- s, g7 |' v$ c. G以下是引用片段：4 {; X1 M/ n$ d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % d7 g4 d/ K$ |; g
<html xmlns="http://www.w3.org/1999/xhtml";>
6 I" L& _" W+ G! X0 f+ a<head> Z- D% N' R0 L; J
<meta http-equiv="Content-Type" c />
1 Q/ v, o7 G4 Q3 v5 E8 M; B<title>css2.0 VS ie</title>
! w! K& x9 W; m1 U7 Q" O$ F; {<style type="text/css">
9 Z2 w( u, c# W$ ]<!-- - W, z: A, f6 q8 H5 n
body { $ `. c9 `3 L8 a8 M$ d3 x1 N
font-size: 12px;
" [- _/ M4 q" h) w* g8 q* c/ }# itext-align: center;
: N5 |# ]' b. [ X( K% O* ~margin: 0px; / i2 y& q! o0 h
padding: 0px;
+ |3 {' Y b; E0 q) K$ E) ~9 J}
m3 t% S3 F& G2 F#pic{
" H* B" c% H' z5 C margin:0 auto;
# ^9 G' D8 k! O* T width:800px;
( y. D9 l6 u6 S padding:0;
2 a3 U" G, D9 L9 s% L9 S, J# t0 e border:1px solid #333;
1 V3 N( n4 _' z8 \" v, \3 k }
% @# I: X( X3 ]; s+ b* J#pic img{ " A! n( J5 C+ [5 t s. `
max-width:780px;
C8 }+ e+ `" }" C2 y' O7 c) nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 j) T9 _5 @: ]+ {6 Dborder:1px dashed #000;
+ i8 T1 T$ w4 z) N! {& x}
. S. Y5 q |# B1 H--> 3 a9 x |7 R2 p7 n/ }% z
</style>
7 c0 n" s! t9 V) Z* C</head>
( S( {( C8 _9 A4 o& d<body> : C7 h" s- k4 l0 j( ]+ S) E
<div id="pic">
+ i; l% a& z/ Q- F0 k, x8 G<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - i+ L' k$ D0 G' b, i& v; a
</div> % {# G! D# N+ B9 w2 y
</body>
% r; I$ A" s) n |* }& s</html> |
|
发表于 2007-12-8 14:55
| 