|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14421
- 金币
- 2496
- 威望
- 1647
- 贡献
- 1444
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。7 v c: n5 S! m% A* l! Q3 \6 y+ J
关键在于：max-width:780px;以及下面那行。
- d4 A7 n* X% {4 g固定像素适应:/ p' d# B6 b& Z( x3 O" k! P2 y
* w( N5 `* v, ]6 X$ 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> 以下是引用片段：+ f5 `* d/ I% w# p0 ~- I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: _/ Y; m6 t7 Y/ x0 c3 t" z- Q+ O<html xmlns="http://www.w3.org/1999/xhtml";> : A% c; N4 q8 Q
<head> K0 s( j7 h; r2 D9 w# Y f- d
<meta http-equiv="Content-Type" c /> 2 M" q& d v9 Z& [' ^ z6 M4 I
<title>css2.0 VS ie</title>
a @' U2 Y2 Z5 p: _# m<style type="text/css">
( T1 i/ F) W9 R" U, B" ]<!--
& q$ O3 G9 Q6 `5 G" Fbody { ! N8 s' N; `6 u8 x+ t) |9 A7 ]
font-size: 12px;
& S. B: P6 v* s) \; M, htext-align: center; 5 W* S0 R' @! g* b8 \4 a! N6 `
margin: 0px;
5 {0 c& P0 x) tpadding: 0px;
" l6 N0 |2 ]. a* V( w} % k+ Q1 Y% v8 ~4 M6 R0 [
#pic{
# o$ T! m/ r3 z) w3 ]0 q margin:0 auto; 8 n5 J/ J( _9 |* O
width:800px; ( K. F- `$ J: @& f# i( G, I( D+ Q
padding:0; . l# l8 v* W& l* W* x( Y
border:1px solid #333; X% @9 `5 j/ f: M
} : N' F D/ p. T* l0 r
#pic img{ % N2 ?4 i9 A, q$ _3 f0 c' p+ [
max-width:780px; ! l. M4 E @; Z; b: Y* s w
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( j9 O) x- ?% w( dborder:1px dashed #000;
/ m3 W9 b: H1 E1 |5 ?}
6 |/ U5 ]$ J4 [* h-->
- y* E6 M$ j4 L9 A$ _6 a: ^</style> 2 {6 Z: _8 E5 A% u6 R/ p# N0 N. T
</head>
J1 x, S+ R- V- L<body>
5 d# _/ U# a3 ^<div id="pic"> 0 P7 x9 w6 z+ g# Y P: M' T
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( C/ H$ O0 r) G! k
</div>
1 Z8 ^5 E4 n* ^</body> ) m1 Z# U# M1 x2 q0 l' X1 [8 [
</html> 5 G$ Y- ^) B; v L
. X: `4 \2 H/ j- _5 u4 r
百分比适应:
: Y3 H6 |: _! V3 o" F以下是引用片段：% V( r; z% e& _$ D* G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. t3 O' k2 M- l<html xmlns="http://www.w3.org/1999/xhtml";> 1 V, V: u {* w1 |. U; |. f- i
<head>
# ~* Y6 a/ [: l1 m& ~9 s<meta http-equiv="Content-Type" c />
c; t8 }% h0 Q0 _5 C& G% A7 S<title>css2.0 VS ie</title>
2 E' A% c1 h$ q0 \<style type="text/css">
; K! C3 i! n# K& S) \$ d# @<!-- 3 V$ Q2 w: P* k b* ]! U
body { " Z% H' L2 T, P
font-size: 12px;
, F: z4 t. a9 K; R7 U$ stext-align: center;
; Y$ u5 v3 I& Fmargin: 0px; 4 M0 W/ _5 v( @! ^0 n
padding: 0px;
0 N/ d# I+ A$ |5 _$ B} f; N! }8 g2 O+ V
#pic{
2 o- b( w) F" G5 B margin:0 auto; 8 B/ ?5 o) f" H; r) E+ Y
width:800px;
* b9 ~9 y" c8 L4 o) R5 e padding:0; 4 Z0 ]5 Q; W& [7 A8 n
border:1px solid #333; ; A+ S0 u, ^% g) e6 B- o! O
}
* A( Q( b9 ^: A* T#pic img{ ' G' m/ I, ?0 s; n8 L7 ^4 q
max-width:780px;
/ K( s3 E% M# A6 R, h: Pwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# s; y( E8 R" U0 A7 E: O' Xborder:1px dashed #000; 0 C9 V# f* a3 r6 [
}
9 [) s, X! [% D5 a- q-->
& ~# x3 L8 O- f</style> & p- H6 H% o8 z% r r1 Z
</head> ( \/ z, a+ I& q, t; K8 S" v
<body>
; Q5 C- c+ B1 Y4 N( `<div id="pic"> - [1 \; J+ [7 J4 h' _) t
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # r0 m, z! y) n8 f5 ~! P6 ]: n
</div> * u+ B2 U3 G* E
</body>
3 z0 G& q* t; ?1 @; w. g5 s% R</html> |
|
发表于 2007-12-8 14:55
| 