|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14433
- 金币
- 2502
- 威望
- 1647
- 贡献
- 1450
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" ?+ c4 t1 s+ Y# N" G) r. v关键在于：max-width:780px;以及下面那行。
9 B. w& B+ N0 j1 f: u固定像素适应:
: u. Q3 g) z7 l0 ?# X6 k
7 S/ X( [7 @2 e7 q5 S& udotted; 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> 以下是引用片段：
2 h1 V3 N. }/ L3 X& {<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 B" l$ M4 P! n# E7 e, y
<html xmlns="http://www.w3.org/1999/xhtml";> j- m- F; d3 J1 e4 K
<head> + C: |7 M" b( s
<meta http-equiv="Content-Type" c /> - U' M8 j; d# e$ w
<title>css2.0 VS ie</title>
5 d# i: _# |6 J<style type="text/css"> 1 h* |( o- t/ k. Y, d
<!-- ( \, ^8 p8 B2 m8 s, u0 | b {
body { 1 X* e4 t/ v6 T* ]. M; U- k
font-size: 12px;
* Z: h& U( M4 ]" l+ R+ S! x1 `3 dtext-align: center;
$ r2 J0 W; \! B8 R' Smargin: 0px; . f, F2 `( ]* {( @
padding: 0px; ' N) y3 O, n, @: s) o+ k3 K# h
}
O5 |0 X) V3 g1 x/ C) d#pic{
) E b: o# z; V/ ~0 O7 v$ j margin:0 auto;
. X3 x1 k% n, F% k6 c1 J3 _ width:800px;
2 i) `- N3 e/ F# D padding:0; , y4 t/ w/ I8 e3 i. o, Z4 l
border:1px solid #333;
! {5 `( w0 c' v- c& o } * j! ]8 c9 m+ P
#pic img{
! Y6 O7 i$ W8 L$ I% S& S max-width:780px; 0 X. j% ^ j% i. `8 H K6 G2 O
width:expression(document.body.clientWidth > 780? "780px": "auto" ); . H1 w) m2 d' z& h& ~
border:1px dashed #000;
/ j& k7 V* ]- v+ {}
5 U. l) _- B! W# ~--> $ C# [# `; s- \% v: `# X
</style>
8 h7 ?" }. r- w7 ~/ |: [ t# Z% {</head>
% p; C6 f+ }8 n+ s) S<body>
2 j: k$ u' G# j/ \4 T<div id="pic">
: u. ^$ Y4 i6 D/ C<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& t7 e7 r4 Y& Q9 A5 x: w3 }! O</div>
$ \) N8 g0 f8 X Y% f3 Q% O</body> ( X, f6 S8 T1 D3 i
</html>
) r/ w5 M) o' W% w6 n
6 _2 N! L0 r0 H' G4 \* c1 k# ^' h百分比适应:" E% ~# G+ ~: j( T
以下是引用片段：6 ~# q) _4 A3 c* b& n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. H7 o0 |: Z: s3 U2 ?<html xmlns="http://www.w3.org/1999/xhtml";>
1 Q0 H0 S0 I3 y<head> 1 v; G$ s/ W& G# Y% c x
<meta http-equiv="Content-Type" c /> , Q7 N, H! Q4 O
<title>css2.0 VS ie</title>
. s! e5 j/ b* h1 J<style type="text/css"> / ~0 @9 q8 _ }% R
<!-- 5 h- m. V u# B3 o5 R$ \. w7 ?5 c
body {
& W( v) y* V* e6 X5 C& f7 Lfont-size: 12px; + _3 @& @% d& q, n/ y3 x9 \5 y" L
text-align: center; 5 T9 o2 C/ ?. h: s
margin: 0px; # p1 h: i6 b6 V" J# K. b
padding: 0px; ! P! k! ^& S9 y8 R- z3 y
} 0 [' y6 D! H- a
#pic{
, d A$ X1 _2 O+ c1 q. K margin:0 auto; % ]" q1 N$ A8 G1 R% P
width:800px; & L, U) V- A% C* C
padding:0;
: U9 f" Q5 W" I+ v" c6 j% z( _ l border:1px solid #333; 9 K" F7 \( g. d9 e
} 1 e/ x. Z; |$ C6 A* a5 U
#pic img{ % T+ U/ @* s$ s
max-width:780px; $ I( v; R; K' l
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ S' F% z7 F- ?9 R0 D" ?( eborder:1px dashed #000; % i: \/ n) o, o) b. f" p% o
}
' l: `: A* R! @" h& L: @5 w* o) n# A--> 0 Y( }. S! ~7 { v
</style>
& w6 X. q+ i- ?9 g) O6 A</head>
$ H, D6 J8 F2 g% B' o3 J( C' C) ~<body> 3 ~& V0 k8 ?; l
<div id="pic"> ) f6 I0 l" |* b& V1 i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! k, Q4 L7 V$ b$ \6 P2 H
</div> 9 F4 \5 |+ [4 ^6 I7 @$ P
</body>
, I6 o7 n* U3 S5 n+ z* r</html> |
|
发表于 2007-12-8 14:55
| 