|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14355
- 金币
- 2463
- 威望
- 1647
- 贡献
- 1411
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
8 T9 z! Q; S$ s \ H关键在于：max-width:780px;以及下面那行。* c4 Q _; l9 G
固定像素适应:1 ]- q7 l3 A8 h) t) _' v
% G" L) O( E5 h6 s: \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> 以下是引用片段：9 h: n2 |1 z/ C- a. ]5 H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ ?- ~2 A8 x# t& b( q( B<html xmlns="http://www.w3.org/1999/xhtml";>
- z6 U. d5 H2 w: |* }1 C* N! H g<head> 2 l) d. c7 I8 O6 v
<meta http-equiv="Content-Type" c /> : g$ t$ t% z `/ k
<title>css2.0 VS ie</title>
0 a9 U: L1 A/ \0 P! n* w& q<style type="text/css"> / g! {/ B' W) O/ b( g
<!--
1 G K1 G1 A s4 k4 x# h" h* Bbody {
& y- E5 V3 s' P: h+ u8 gfont-size: 12px; 8 P# O5 B, z" o2 y
text-align: center; x# \+ I) U' R6 b0 ~8 r9 z1 p+ O4 U
margin: 0px;
% f. R3 v7 Z% P2 x) p; rpadding: 0px;
9 i. p* y3 Y; ~% ~1 q}
0 K `7 l ~; Y$ z( ]% j#pic{ " R) R0 }: d2 t( W
margin:0 auto; ' r/ M' a, w0 s. t
width:800px; + n) F. j9 z3 F7 }
padding:0;
8 _/ T1 x/ P. I! U `' T5 D: G l( u border:1px solid #333; 2 \ X5 ^/ x5 h5 h
}
( Q" W: R1 y& j. f( D- R#pic img{ 9 Z0 a8 o3 [, I, _: F- W
max-width:780px; / b8 l& _; \( n+ D: J8 N
width:expression(document.body.clientWidth > 780? "780px": "auto" ); , W& T/ k+ |- }9 E! d7 X% t
border:1px dashed #000; 3 g& q* x* H! X4 r
} K5 x B! V0 V5 y+ d
-->
2 j" @- w' H/ `2 }</style> 6 u4 r- f& G7 F- N* H$ \/ X
</head> / y+ C7 `. W4 p) p( ?
<body> & Z7 i- r* P; r5 g. S9 @7 @
<div id="pic">
( S3 g6 R/ d/ e7 n<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 s d, I3 ]8 f& U
</div>
+ N7 { N$ e7 k* j5 u4 u</body>
8 S# f. B6 [$ V</html> 9 d) J# x- K, z! F* Y4 T% _* S
p; X0 B* o6 E3 E$ b
百分比适应:
+ F9 M' z. a' W( D2 E以下是引用片段：, y2 d* F4 K! N8 N( Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 s# @2 l" k. ?<html xmlns="http://www.w3.org/1999/xhtml";> 7 P0 u4 D Y/ x' `3 d
<head> $ z1 S- \+ ^% s n7 D
<meta http-equiv="Content-Type" c />
6 ^ ?$ _! G% z) ~' S3 N<title>css2.0 VS ie</title>
0 J& t/ y* a& |8 g+ u7 k! F: D: C% ~<style type="text/css">
7 P9 p6 Q- u n! U( i$ x0 n6 | p<!-- ( }* w K: q9 t7 j' a# D- n
body {
' W4 b$ W: L4 K) R1 ?font-size: 12px; % [* B5 |, V8 g
text-align: center;
; G9 {' N- y1 u+ i( Y7 ~2 F% {/ Imargin: 0px; ) z. s) F5 t, [
padding: 0px;
$ V1 K! N1 P' U4 y2 z5 x* b} 4 _- \) r( P! f) y+ c
#pic{ 2 p/ B! h6 J; u/ E
margin:0 auto;
2 I; w% k- k: H4 P width:800px;
- ?) @& Y- g$ { padding:0; 4 J1 C: B& N9 d, y
border:1px solid #333;
( ~# A) \& |7 Y+ a }
( z- E+ A# _6 _#pic img{
5 s/ u% [* {7 B# |; i6 T K: b3 O max-width:780px; / f8 y9 C2 F _ Z& C& G) b
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ k* ^) a2 c( G% O2 P/ eborder:1px dashed #000;
: J `; @. \' o1 P}
8 r, t7 Z7 _( ?. A5 N--> + Z, E" X" \% D z7 X% |4 k
</style> ( o7 {7 P6 _3 I p# }" F0 E
</head>
+ V1 i4 M( w' E; A$ V<body>
8 l8 x' A. C( F5 Z' H<div id="pic"> / Q/ D0 B' m0 j& o3 L
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> n/ |; ~2 Q% m# w* N+ \- H
</div>
' `+ Q/ k* ?7 Y6 r) e0 ?</body>
) h! j+ v4 j8 `</html> |
|
发表于 2007-12-8 14:55
| 