|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14371
- 金币
- 2471
- 威望
- 1647
- 贡献
- 1419
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。; |9 L: ^* A) h+ V$ F) V8 g
关键在于：max-width:780px;以及下面那行。
/ _9 m" [4 `% l+ K; \固定像素适应:
$ D* i0 i Z' A0 M; h, [+ s4 }* ~+ [) r+ r8 T
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> 以下是引用片段：
0 a* g0 s# _" F( R. I# e# _2 h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 }6 v0 Y: v, \9 A" O; o; K
<html xmlns="http://www.w3.org/1999/xhtml";>
% P B C# }$ T: w<head>
; D) m L$ O9 i9 _9 C/ e( d<meta http-equiv="Content-Type" c /> . I9 D2 ?/ W W' |% L# E2 `3 c
<title>css2.0 VS ie</title> $ f1 N- R H% f' v$ T* s1 \
<style type="text/css">
+ v5 F: r; `% h; w3 v% M<!--
" l e( l Q) b# Z2 }9 Y( jbody { ) p+ h* Y5 e% z" N8 X
font-size: 12px;
/ x/ I% n! z, J K+ Y) {text-align: center; & k# |) U4 a6 C: V; p( \+ _. B* @
margin: 0px; 8 G( i& A) v% c* D1 }1 f
padding: 0px; 8 U1 I' n6 `- H& o* v5 k
}
5 k9 H8 T m/ b; N5 _#pic{ 4 Q/ @1 v( s* y) J* g/ w
margin:0 auto; 5 m2 @8 V1 V5 l/ V; l2 m- V
width:800px;
0 I2 V) X |; C+ Q padding:0; 6 Z. B2 ^8 C; o. Z) E% F
border:1px solid #333;
: [) |6 }+ K. W- ]; R' N* `& B& X } ) S! N2 x3 A) t
#pic img{
/ @ A9 N$ }( H- Q max-width:780px;
2 S: X8 q0 d) F6 X# n& awidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ; F( q2 T1 E' q% ~- M$ T2 h
border:1px dashed #000; 2 P1 ~& ?& F, g, Z [0 p# u6 X
}
" [1 F/ T+ a3 u. o-->
) h8 U, b2 |4 v5 n3 t</style>
# \; y3 ?3 [. O1 m) y</head>
3 P5 m4 o+ _/ R, e4 B7 _( x$ C<body>
" g1 N5 X! U9 o6 L" p. G<div id="pic"> 6 W- I3 X1 E2 y- N% q, d: Y* H! R
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
O) d) t* P* X* V" F: B% ]</div>
& ?. ~* y6 c J/ z0 q</body>
P2 O5 @& M+ B* C</html>
0 A1 G5 [3 z) H! @4 s/ C7 h" O1 g9 c6 i% x" w& _: X9 {- h7 P
百分比适应:4 x+ j9 ~; ^# B0 s2 ^& c* _
以下是引用片段：
4 m2 R8 k6 b, ^+ {- h' B<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( G! Z: p% v# w+ w<html xmlns="http://www.w3.org/1999/xhtml";>
) m' e6 \. J; O" {4 k<head>
; O: s, j# a3 C( p<meta http-equiv="Content-Type" c />
$ v" ^& S. m6 E4 P. F<title>css2.0 VS ie</title>
7 g+ Y) ~6 m3 L1 @! k$ k- i; |<style type="text/css"> 8 \2 N7 X1 p3 R7 k) {2 ^
<!--
- l' m" x0 c2 U( ?' p6 w/ O3 Zbody {
9 v5 N, S) H6 S! Y$ j q& wfont-size: 12px;
2 u5 f* @) n4 e/ T `text-align: center;
; X3 R, m' W0 [. c9 Kmargin: 0px; 5 }% U% T6 z7 } h! u; x T) R2 q1 E
padding: 0px; * f* }' z9 b- m& @% y
} % K# z* R, f: a9 q) }, L4 g6 C/ m
#pic{
* C, H0 @; c$ Y margin:0 auto; x. a- z! H6 u9 q0 @
width:800px;
) n2 I2 N3 C, s2 f% ~) g0 l* X padding:0; / O& I+ ]- |0 `
border:1px solid #333;
* a2 ^) ]! e9 n7 o5 e+ c }
0 J8 m5 C' e9 s8 R8 Q6 @0 [6 _#pic img{
# M( U( q/ b# B% s0 V% ? max-width:780px; & h" A0 |$ Y2 u, j, J
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ' |; _" F2 S6 _- i) ]
border:1px dashed #000;
1 M5 I/ z2 \" q* o+ r+ ]}
& c% @0 C; ~' M0 T* f% v8 S2 I2 f--> ) C0 }/ r0 }$ A. J- |
</style> 9 `2 a5 m3 Q1 a8 n' J
</head> ) Z, j$ X. j* v3 {* { g
<body> 8 i9 w* [% k2 o z( D* q% V8 P
<div id="pic">
U, {7 U+ D) ^1 |' x- j, k5 o- i<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 |5 l s. h) v0 ]! I' }' L</div> 4 Z' V# \4 H2 c0 L2 `: O
</body>
7 C0 M4 R$ T% h- h u</html> |
|
发表于 2007-12-8 14:55
| 