|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14341
- 金币
- 2456
- 威望
- 1647
- 贡献
- 1404
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! X+ T0 R0 ?& P x7 X, h关键在于：max-width:780px;以及下面那行。
3 w4 T: B, V: p4 l& q固定像素适应:
; z( {/ Z) P+ _7 Q8 ]6 ]* o X
5 s, p( \/ q0 A1 g1 v9 h4 Ydotted; 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> 以下是引用片段：! F: o% b7 B! ~3 ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! b, B! h: m7 Q; F" J<html xmlns="http://www.w3.org/1999/xhtml";>
) j, Y3 M# o3 z P<head>
( W$ J! O- a. A( z8 G<meta http-equiv="Content-Type" c /> & P' e# I; m- D0 W$ n3 ]
<title>css2.0 VS ie</title>
/ C) G. J3 D- s+ Y" x# b<style type="text/css">
6 v% X- N; r9 W4 E<!-- ! R- {. g2 v, {% @( D/ B- l+ s
body {
8 I) x. R* B/ Z) y2 b! z- yfont-size: 12px;
! @; m8 P+ X' W9 f4 Ktext-align: center; ( K7 u; o& X( R
margin: 0px; 5 Q' |+ C! N* D" N) _2 C8 C
padding: 0px;
- p* U2 [2 ^2 M; i}
* Z, z7 H* A( b5 ^#pic{ ! @* [$ G4 e( h: U% b
margin:0 auto; # r5 ^$ |! u5 y3 }
width:800px;
% H3 v( O0 B% ?" e( z3 k padding:0;
* P* y* r) b6 ]- ? border:1px solid #333; 5 s# K% {6 D5 Y4 v4 l$ X0 T
}
8 K) U# m3 F+ {/ B#pic img{
- e8 n0 s1 h! Z+ p# A+ O; ^! s max-width:780px; 8 k5 g: G% d5 b- c3 ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( q( A" \4 m/ d- q' T( }border:1px dashed #000; ( ^7 U* `5 D+ I8 H5 {6 u! X- [" h
}
/ Y4 v6 f" H9 A7 F5 }-->
6 a% E$ O8 p* ^3 j* l' U! k</style> + u& x% S- | I) s
</head>
/ ?" f i# P7 X% M. Q$ n<body> - |7 s3 b1 O% {: S
<div id="pic"> 5 ?) ~5 [ A; a4 A, D
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% J2 [+ i* B6 v' b</div>
6 b0 u9 s- h* h0 m2 }</body>
( X1 h. i9 G1 x2 w" i</html>
! ^1 Z7 p# T8 {! k1 v; U
6 P: M. f( Y T4 f1 `百分比适应:# o; i* {( l* t
以下是引用片段：4 b5 H9 @3 R. w: O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : n/ M/ @% f7 R3 Z# |; z
<html xmlns="http://www.w3.org/1999/xhtml";>
' K$ v7 Z6 k, ^3 b<head>
! N" B! r. t* j9 U<meta http-equiv="Content-Type" c /> / v% h' O4 e3 j6 N3 H( h" p' P0 x
<title>css2.0 VS ie</title> - Z2 N2 V5 i* _- {# `, j" E, W
<style type="text/css">
8 Y- p+ z+ g$ F2 c1 _. q5 f$ A* U<!-- 3 E0 `/ b6 O S0 J
body { . C5 x; l/ Q7 u$ X# a/ E5 w
font-size: 12px; ! e! \( z' f+ `% `# Q# a1 t
text-align: center; + `' Y: _, `( h* k- S4 Y# H1 R' @
margin: 0px;
( ~# m" a% K& ?padding: 0px; # r3 I" Z* d: D
}
+ B* O. E$ Z6 q# V6 l( ]* u% e#pic{ Q$ w! T" g+ ]2 M) ?' Q+ T
margin:0 auto;
2 t& N/ p* P/ F6 X width:800px;
7 x, D8 M* L" I padding:0; 2 N1 ^. w& a n& a
border:1px solid #333;
( v. r; K+ E p6 ?, m; o* m } " p: A5 n v6 m& o" c5 b
#pic img{ , `1 N X, j$ }. {' W6 B, F& _
max-width:780px; 8 o! Z, l: P, q4 R. [# E/ R0 h% ^
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ m( s a8 \# T% k. v' kborder:1px dashed #000;
n) V# E# r8 i% _; W$ O9 l}
: n7 u& D* u+ R--> # C3 }! x S( A8 Y+ G
</style>
# D3 U4 S' D& p& Z1 @9 m8 N</head>
6 m& B; ~1 }2 o1 R8 i<body> , R( ^* u+ J9 A+ @4 b. r9 E
<div id="pic">
) P1 x$ A( m" E7 U3 I<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 W- \ c3 x4 N/ _7 N& ?</div> ! N! \8 P- Z( u
</body> 1 [+ m3 ^+ V2 a/ w s7 z& |
</html> |
|
发表于 2007-12-8 14:55
| 