|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) a: B4 h" b; w) S N关键在于：max-width:780px;以及下面那行。* k8 k6 X) r O0 }% ^) r
固定像素适应:
5 `) A" V9 J% V% F6 p; j, }' {# Y0 I$ 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 J" O, W9 B9 ?3 g. p8 m<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. `" i# ]% Z+ Q2 o( S2 x0 [<html xmlns="http://www.w3.org/1999/xhtml";> 9 v5 z1 ]. y8 ~$ J* f' ~! [! Y: [
<head> ; `3 n3 Z5 P/ P/ F
<meta http-equiv="Content-Type" c />
. {$ u+ A% x3 e' g<title>css2.0 VS ie</title> / d& a, X) V' s6 R- i: p
<style type="text/css">
4 U* s: f% B$ D9 s$ K$ f' T<!-- % F, D% j; b0 r* e" ^7 t
body { 9 R2 e$ r+ j' t" D% L& M; `
font-size: 12px;
- }$ {& I* e9 B/ U1 htext-align: center; ; I: _3 r) L7 {
margin: 0px;
* \* U+ m- P; L9 Q* f: ypadding: 0px; 2 a9 I! w5 W, A; ^0 O7 D" X" y
} g9 F" s( }; E+ z8 B7 y
#pic{
! L- |" {# n+ b: v margin:0 auto;
; ~* j K: L: u' P# Y# O width:800px; ! A- f3 H% A+ ~! w# f/ \8 N0 a
padding:0; s( m) R4 W- f7 H9 F
border:1px solid #333;
6 E7 z8 p; U0 s- ~! X } 6 d$ k3 S2 e( Y, Y) `7 p
#pic img{ - U: R. Z0 I. {$ n3 W9 o
max-width:780px;
# s3 K( S/ X( G3 vwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ) L+ T! R$ }( v5 E
border:1px dashed #000; ) e9 p6 _$ ~ ]; J& w
} ! q* U: s F: n2 S0 d1 [
--> % T6 m3 w. S1 S. C& ?6 J
</style>
0 `7 K, E+ p* e( f& m1 j</head> * k, l% _) e2 K8 M
<body> - j/ I+ e7 {$ a/ a# S9 j" R$ D
<div id="pic"> , Z {' k7 U+ K$ |! C3 Q1 C, ?
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + F- f/ a Z" a) D: q6 Z8 h
</div> ; N0 v- K: m8 T5 L
</body> 7 q. b* @6 |" q
</html> 0 b: {8 N) \& O. ? t% s3 S
3 q' {, ~) |7 ^( }, o, U百分比适应:
5 w/ h% G' h9 K8 o" @以下是引用片段：$ f# y5 G+ w+ {/ ?* ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, b' m. ?1 a, s: h, q" Q/ Z<html xmlns="http://www.w3.org/1999/xhtml";> 0 k$ m1 R) l. a0 P2 X; ?9 W# g
<head> : b6 O0 o D# M. \& R$ K; y w( @) S
<meta http-equiv="Content-Type" c />
4 y( N! v( I* s* x<title>css2.0 VS ie</title> ( b" c; \; a& P9 ~" j7 ]3 N: e
<style type="text/css">
% a6 |4 w% h* p7 ~' }, g* V<!--
, {6 n7 n0 v7 ~" S3 L6 qbody {
3 c) X- V# L3 P$ Q" H5 v! E# _* kfont-size: 12px; : V5 I" x- c* D
text-align: center; 6 }+ \- d. G- h$ Z8 P, m# [$ e
margin: 0px;
, ^5 j7 K8 c! q V3 dpadding: 0px; 9 e3 F+ d [4 C
}
2 B5 p1 W/ L1 P#pic{ 0 n: y, C1 g: g2 l' W$ V7 `& E
margin:0 auto;
}6 z# ]- R" r" ~% y$ l width:800px; ' x! g" T8 J J& Y/ c
padding:0; ; {9 k: i! {+ b( h8 U" ^
border:1px solid #333;
2 s/ a2 v) S8 h9 `9 A/ s }
: V/ H: k( e H$ O. x#pic img{
0 G, W0 R: B3 A( l6 `0 n q max-width:780px;
; s5 }4 a2 z6 v; b9 Y5 @/ d$ Jwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. L' V' I7 G q5 d; W, V: W9 ^- z: ^! nborder:1px dashed #000;
2 [7 c0 A* L# i: i4 N} 0 F' v7 c. i" V
-->
9 [& M: Q5 t! E3 b</style>
; @. K. e2 m8 x8 m) Q" c+ x l</head>
7 O8 z- G! N/ g6 `) E<body>
: j: @7 F# H5 x+ b; i: x* s# ]<div id="pic"> 8 k9 R4 X: t7 e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 d3 K# Z: l) B) C' Y) i. r+ O" p
</div>
8 t! ]' {1 \9 R* {, Q! b</body>
$ x) L' l2 X+ G+ ^' n% u2 P. g</html> |
|
发表于 2007-12-8 14:55
| 