|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 T; \* O" K* l6 H) O( ^关键在于：max-width:780px;以及下面那行。
( o; p% K: t) K9 F. a' F& I" K+ u; N固定像素适应:
, h' i# A: H5 z2 u1 `9 f" a' L" J, F7 \* n# _+ t+ d3 C. w
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> 以下是引用片段：( _/ m }& f* P- T) v* m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # y4 O0 ]2 u6 c: b3 L
<html xmlns="http://www.w3.org/1999/xhtml";>
8 h# D, B# S* C0 z3 s2 j7 m<head> " s: P# d' N8 {$ Z8 C+ ^( R5 L
<meta http-equiv="Content-Type" c />
- r7 N2 ?6 g6 ~& G% C, n$ s<title>css2.0 VS ie</title> 8 y( I% |) i, E! R; e
<style type="text/css">
6 y( @: a3 \ \<!--
% W6 k- K& v4 Z' ?: L+ |. ibody { / W' A3 |! o4 A# X
font-size: 12px;
( F) s, \/ H; u. u% t# F* f% d5 Vtext-align: center; % J/ q! o8 n$ h* O1 {7 S
margin: 0px;
, I5 `* j; q+ U! q: Vpadding: 0px;
- R9 f" k R; v4 x}
& u% w6 O( K8 c; c#pic{ 2 P" N' K/ ?8 {% m! A" Q
margin:0 auto; ( F" H/ c$ s8 K; u/ {! k
width:800px;
. H/ V9 M% }' N8 X2 x1 |( J padding:0; ' v. d1 L9 X0 U1 [
border:1px solid #333; . b; M9 M- Z: w B8 ]( O
}
+ j* y" y* r2 ~#pic img{
* t& P% k- w7 Z& i S$ e" O max-width:780px; ( i& p4 P" o z% i& ^
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! O+ Q& B& Y: z yborder:1px dashed #000; W3 b2 f$ t% T, }
} $ h& |. t) M; s' g6 r2 s1 O
--> 6 w. @- S( l( D L* M( n& X2 ]3 W
</style>
" U6 m2 P8 ~5 A L+ ?; a</head> 8 U8 U" B' Y7 _& I
<body> 4 C( ]% j9 d4 Q" A- W% R
<div id="pic"> % H4 H/ u+ Z1 s( N3 y2 a
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: ~! n k3 o! l; t</div> " A$ v% s% Y! w& O* Z, b6 ]8 v
</body> 7 B' r r3 I5 q2 i# ~- s# D
</html>
( E% ~. [3 ~" X0 n6 ?' j
# ?- p' Q# `, U$ j百分比适应:
3 I$ x7 v" H) k' u以下是引用片段：
/ [9 K# C2 W8 q& F4 D% k* k+ g<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ C7 U$ _+ H* C7 R) z' @( d8 ^7 }
<html xmlns="http://www.w3.org/1999/xhtml";>
. \2 X0 \/ Z8 |2 U1 n<head>
' M2 E x& U, s# x( X" ~<meta http-equiv="Content-Type" c />
9 k$ O6 H E0 B" D( d<title>css2.0 VS ie</title> + ]: e' t( z. A8 d# ^$ b
<style type="text/css">
1 H# }; |+ p9 N* P M<!--
0 R {' V& w8 Pbody { , V" q* P9 J4 J/ N9 G2 z
font-size: 12px; 4 Q" h+ r+ I+ `* _2 b6 E8 |" E; m
text-align: center; 1 ?2 b+ ^6 ` g6 o5 Z
margin: 0px;
, _( m6 _: O' O2 U# D4 h, vpadding: 0px;
# C( n% O( Y' V" m, I}
) N1 v y* q, L/ k#pic{
# O% M7 U: h( R margin:0 auto; " d3 _, r; F/ D# w) m
width:800px;
; z+ p o% K# @0 n padding:0;
7 ?& h* u! m4 k border:1px solid #333; D& p3 H$ o+ u+ J$ ^0 k
} 1 X* C* J8 ^9 I- q
#pic img{ 0 B$ g8 Y; {, h5 }* h5 u) C) @
max-width:780px;
! [7 ^0 V5 ]5 i4 j7 r+ v# Fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 H7 ?/ u X- n0 r# X5 K0 j; yborder:1px dashed #000; ! _* E' N: y+ t! m1 U
}
* A3 B: v: `* X2 H: S-->
; s0 r6 m3 W) c" b</style>
6 r: E+ S, l; R& y* Y7 O</head>
- O) E) b4 R. f/ G7 r* J<body>
; a+ q: [- R% |<div id="pic"> E2 F a: K3 D
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* `! ^ \/ v R" u</div>
4 ]' w- \6 r5 i' G' x$ q</body>
) h% m: m0 g& b! A8 y</html> |
|
发表于 2007-12-8 14:55
| 