|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' F; A4 v7 ?0 P) ^$ G关键在于：max-width:780px;以及下面那行。
: o3 K9 t3 }! @( P9 B& ]4 [, D固定像素适应:' L: ? p: g% `
! ]7 Z Y3 u% E$ t0 c
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> 以下是引用片段：
5 ]1 X6 \9 ~, z. `' y* C, o<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ c+ t$ T/ ^* a: u; ~/ H<html xmlns="http://www.w3.org/1999/xhtml";>
4 T* i& ]. B) U4 A; \<head> * W } o$ Z! d J8 y( B/ k5 d1 Q J
<meta http-equiv="Content-Type" c /> " M4 G9 D. U" e6 G5 f) s5 r& F
<title>css2.0 VS ie</title> 6 n+ J. F. \' G1 I
<style type="text/css">
% J5 M+ q9 G# a5 M<!--
* `( z+ J" p5 A; p2 s* nbody {
- q* S8 s" C' q' zfont-size: 12px;
: x" J0 g* Z, U% qtext-align: center;
@* V; b# C: G& A7 H0 s/ w8 s! V0 Gmargin: 0px; ( v! s8 X6 G) i# G- ^! }
padding: 0px; ( t" g( u3 }$ o
} Y! \$ p/ J k3 T* p2 w. l' e
#pic{
' g. s' x4 C6 B) ^; R2 g) ?3 p margin:0 auto; 8 s f8 Z: ?5 A$ y" p
width:800px; / |0 k( }+ x2 I) I* ~' {7 \0 q3 A
padding:0;
# V) U: f2 t% [6 M& ?2 @) P/ p8 u/ ~ border:1px solid #333;
7 l% a& t) O9 {& t9 i4 e1 B }
" Q- c( `' e7 ]6 W#pic img{ , B+ z) g7 N& u* f5 D* c
max-width:780px;
" z' g" [! }. p9 H5 f5 R3 s- iwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
, m4 U3 [& h1 }/ X {) Vborder:1px dashed #000; 1 ]. d! b1 g; s$ [6 s
} % W9 p0 t+ i. M/ Y. q$ n! J' v
--> 0 B |& R$ x* T$ s
</style>
. m$ D+ {/ F: e% C</head>
3 a6 e; i7 f+ D$ K" ]' Z L) |<body> 9 c7 T0 n& m' m3 h" V
<div id="pic">
! o4 ~* V# H9 z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: t) b4 b6 f7 I/ @" ?" N</div> ?$ O" \! i0 J
</body> 6 G2 J$ }3 E# l9 D3 J) n6 q3 W
</html> 9 y& |8 m/ Y8 L) d, s
1 x- }* M2 v0 m. |0 P! y
百分比适应:
9 R2 z# G. }! H3 P以下是引用片段：0 s$ [* k6 m2 l' J- I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * A% y4 C% K% W
<html xmlns="http://www.w3.org/1999/xhtml";> % g6 d3 ~) Q3 B" J
<head>
6 J& J$ T8 x/ e4 s4 U7 V. k, k<meta http-equiv="Content-Type" c />
, k7 Q# u: J1 e7 s' t<title>css2.0 VS ie</title>
' }4 C, v% E0 G<style type="text/css"> 3 x$ n( T; u. F! o, G N
<!-- : `3 j3 n3 W3 F! F- C
body { \1 y" M: Z& [
font-size: 12px;
8 G7 B0 Q4 J! ?* b, N1 S) Itext-align: center;
2 O2 e7 b9 V4 o; Z6 pmargin: 0px;
1 |0 E% ?0 K. |1 mpadding: 0px; 9 `" @3 h8 D) o0 Z( ~" V7 ?
} 7 K; ]' h0 r, k
#pic{
( h1 i* K9 Y& X, l margin:0 auto; " E) |6 x1 y/ r9 V4 [5 h0 ?) b
width:800px;
% n" N# H0 O) Z6 ~9 ]4 h, m! `) R padding:0;
. a+ ^! C. `0 F' {; F border:1px solid #333;
) C* V0 a6 { s- z# t! Z } b- y) M5 d" |5 |- U1 N z i
#pic img{ , X# x. {5 A$ |* c
max-width:780px;
) Q4 Z& w# j9 |# Y' @width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' b0 Y; g6 m3 Q4 u& J |border:1px dashed #000; , U* [" Y0 @, D" n
}
2 c8 a: K" k0 @+ s2 {3 M" k* ^--> / J# x& d% k' M, n4 s) [1 L
</style> # H; @- i Q& H% m, h
</head> . z8 m1 O! h, H/ @1 _: c
<body>
% S* o) W N8 w7 q6 h Z2 f0 d<div id="pic"> 1 A$ l. l5 |8 A2 H! Z8 D4 n& H( t
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & M j2 a& D3 _, Y' d
</div>
e1 {1 ]4 T a/ ?& \. }- c) K</body>
5 L4 n% Q& u7 ]' ?" V# ^</html> |
|
发表于 2007-12-8 14:55
| 