|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 W2 M: t1 P+ t% z7 w. E/ H关键在于：max-width:780px;以及下面那行。) S$ n5 U$ L/ i! f" {
固定像素适应:
3 R2 d3 V; |8 c
i" R$ O/ h A$ Q; G' I0 V5 ~: pdotted; 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> 以下是引用片段：
7 x9 [2 E1 y6 q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- F( B' m/ a( [( L, H<html xmlns="http://www.w3.org/1999/xhtml";>
; `; K9 Y1 |+ j1 P3 H<head>
7 |: {) j" K, R0 R6 _: \- d# W0 Q% _<meta http-equiv="Content-Type" c />
5 L# o; t" N* h# |6 d<title>css2.0 VS ie</title> % E3 H5 ?2 E. `3 v" ]5 _
<style type="text/css"> - [ M) \8 `# q U
<!-- 0 H, Y3 W/ A' L4 x3 X
body {
& a( W m5 G0 v1 l8 h/ Qfont-size: 12px; & Y, o% L. i- ]$ N8 p
text-align: center; & V& `* z, f; O* V) G, R
margin: 0px; , o) c& J) x$ x. [' O
padding: 0px;
# J. d( D; I! d7 n( V% f}
! p5 v; J/ W; d#pic{
" z2 M9 `! S, d7 L8 U margin:0 auto; 2 Y( n/ c% K3 i3 a1 U* [$ ^8 c
width:800px;
+ k0 T2 Q( {; O0 J padding:0;
% Y$ S6 ]$ i9 E1 \9 ?$ v% g border:1px solid #333;
" m$ ~' B2 r5 Z+ }' U6 j1 r }
. m5 T `% s6 a7 p1 Z5 v" O#pic img{
! m }5 i( G! v0 H- s: Y5 M: x% r max-width:780px;
: p- K0 Y2 v) C1 w; P- _7 mwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
- }' ^. B$ a. c; l$ t" b5 O4 I; eborder:1px dashed #000; 0 ~' i9 R$ u( ^
}
/ a+ i O3 Y$ q, ^) ]: f-->
, U2 z# z$ D) M0 d$ U</style> + b- }+ q' `% _2 z i4 R7 ^
</head>
( _1 D! d/ o4 U/ s2 G9 a5 p6 {<body>
% ?) [. @1 A. `<div id="pic">
6 L! O) }* y" P4 P<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * f# E8 F2 w" p5 c8 A5 I- {3 C
</div>
+ k8 n# m, b9 {6 q- x</body> ' `8 f3 M. x) a d
</html>
: w/ i; d; E% @, r# o3 i) s4 v3 c) D) Q
百分比适应:
Z" g5 u z" |以下是引用片段：
, @) E; O; W( w* P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 n7 ?$ p6 D7 F5 V<html xmlns="http://www.w3.org/1999/xhtml";> $ I3 o$ T: H7 l5 d2 }2 C* I
<head>
. ^$ u3 ?( ]0 g<meta http-equiv="Content-Type" c />
# I2 D1 V$ }' u9 }$ y3 H0 a, r! d; i3 c<title>css2.0 VS ie</title> . c9 B6 m9 B7 O' q! l" M) H
<style type="text/css"> + i+ B) q* d. I0 ^6 Z, Z
<!-- ! q; D( ?9 ?' ~7 E) N, T* ~
body {
6 ~5 @) p" V9 ~font-size: 12px; & `; k9 u" O+ }* a
text-align: center;
2 B6 H3 d. w" `, x, N$ }. R/ T; Nmargin: 0px;
7 X/ w9 b$ G. V$ `) M, dpadding: 0px; # Y9 r+ f6 w1 ]1 Q8 n
} 0 I. Y7 O" P3 F" d
#pic{
) Y; @ M1 r8 p margin:0 auto; & [- F# }# z& p
width:800px; $ ^8 j3 o) U! _+ C
padding:0; 1 z6 [5 ^5 p- H, W8 g
border:1px solid #333;
6 @6 s5 T6 a% T( i }
( K* Z& X2 d8 U9 g' ~#pic img{
$ d$ N: i. M+ k: ?$ A/ |5 ? max-width:780px; , i$ m5 J1 i0 S1 \2 q8 ~
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- E/ D2 Q3 _" g7 n8 Gborder:1px dashed #000; 4 \/ P9 Q* {) e8 \" ?1 b
}
8 t1 g: G3 X0 a, J/ w- k-->
7 m7 P" D& N( p* Z</style> 9 ^- K8 \" N8 i3 F
</head>
y3 h; e* [# y<body>
0 l0 I/ _2 |' _. c2 P- G% i% b<div id="pic">
D: @' D/ q5 B1 Y! B<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 c- |! } @: n</div> * l ?7 P [) P# `* x |( T
</body> l; b8 Q* H: q
</html> |
|
发表于 2007-12-8 14:55
| 