|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 C# z4 G& w, ?! \+ T关键在于：max-width:780px;以及下面那行。
# v" ~4 |* G* e固定像素适应:
$ g1 e8 w! d% \$ L3 j
4 ~0 F3 l$ ?" N: a) U- x+ A0 kdotted; 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> 以下是引用片段：" g( M9 c# d% p' u1 g0 }, S9 V3 r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. D& D% i/ b4 F4 V" B* ]0 E* S8 M<html xmlns="http://www.w3.org/1999/xhtml";>
, b0 s" _1 T9 D$ u @<head> _! W) I- I {8 a, {- j
<meta http-equiv="Content-Type" c /> ! O" ]2 @$ Q$ m$ a
<title>css2.0 VS ie</title>
3 g3 |6 x5 _' R& F9 \<style type="text/css">
# B9 c4 d$ m, n, |<!--
7 W8 D1 |& a3 p+ _0 m1 \body {
/ B. B2 i* y8 Tfont-size: 12px;
0 Q' X% r7 r4 W7 X9 Ntext-align: center;
4 V. k/ w0 Y ~7 G- nmargin: 0px; 9 v' j3 R1 ~$ A1 _5 O7 ?" h! K" u
padding: 0px; 6 y) R/ _/ c4 h8 Z8 g% ]
} - u Q1 j" z7 b! I( d: K
#pic{
4 E+ L# f, `+ `- ?4 {- z5 s margin:0 auto;
/ o! D# E O" s. ~ y width:800px; u4 J9 A# D; N6 K
padding:0; % N' u# o4 j) Y! x2 h' o
border:1px solid #333;
3 T# n& i. e: ]! K/ c" T% q }
7 {/ Z, X( D% j. o3 K4 X9 v#pic img{
8 W, a$ X* h% `3 j: z max-width:780px; / Z) z0 P& m8 [/ ^& m+ ~) H
width:expression(document.body.clientWidth > 780? "780px": "auto" );
- w& q' @6 x& b. D- Aborder:1px dashed #000;
7 F9 D6 F9 y' ]0 p% |, f# c* h} 8 p; {/ a% k2 D
--> 7 s: P# `" t1 @" ?( |* `: g; d
</style>
3 V: B2 l4 K# u</head> * `1 H! R' _* T+ E6 B- z
<body> 1 F! _; V/ A$ n1 w9 i
<div id="pic">
4 R0 l: `) [. m9 @, L' F7 [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / z2 g k) K j# [8 `
</div>
4 c0 p+ p/ s D5 \1 D( z</body> ) d, u$ H1 ~. ~- u+ D, P% l, b
</html> 8 l) k" H+ [) {
) [1 Q9 R6 ~4 w" O* | y百分比适应:
7 X! A" l) `# I; `) M. r, s以下是引用片段：
( [' T: I8 r' e( P! E+ Q& t+ f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 C- e6 g m4 M: T* n
<html xmlns="http://www.w3.org/1999/xhtml";> 2 B; K b" Z' ~( B% r8 |+ W4 s
<head> 1 J7 u: I8 k1 e) t2 |4 D
<meta http-equiv="Content-Type" c /> 7 n1 P; i% u; D2 }7 Y
<title>css2.0 VS ie</title>
9 I7 x) d+ v( S. I6 w<style type="text/css"> 7 y2 y" ^( k) a0 K
<!--
: E/ w0 D/ s! zbody {
1 {, h8 [0 W! F" u _font-size: 12px; 5 v7 P4 D" B- F+ G$ ^* p
text-align: center; & f" H" k6 @) |
margin: 0px; 5 p2 j$ A- m* M2 {7 U
padding: 0px; 9 W2 U) ?+ ^) q2 d6 w- r8 m
} / _4 ~* y2 _, M% {: ~
#pic{ 0 R$ r$ m5 }4 b m
margin:0 auto; ! S/ P% W, J; t2 h+ \2 w
width:800px;
3 A& }6 B w( w& c4 f padding:0; |! q' S0 U! S/ A7 C9 x
border:1px solid #333;
- J- q1 Q; ^; X% [( G7 Z } W0 _3 L4 L$ w3 h' G6 e8 G- a( i5 h T
#pic img{
, O! x' Y1 q3 M3 q max-width:780px;
& p+ f# H0 S x2 S8 uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- m4 O9 k$ S) dborder:1px dashed #000;
8 A$ \' i& W5 n0 p$ z8 s2 O# V}
6 Y% C! Z/ I* S3 l6 T3 i--> ( E- H- P+ E p/ [/ d
</style>
! ^, S3 H; k! g0 j</head>
% O* N) E! f$ {6 F, `. y<body>
; k g, B1 T2 _7 t$ }% j3 z" c<div id="pic">
" I( ]1 w' |/ g$ h. C% ^# }<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; w& R# X8 `: X# R</div> 0 N) \. D* r2 p1 o+ W2 a, p
</body> 1 P! Q8 ~3 P6 |- f3 J
</html> |
|
发表于 2007-12-8 14:55
| 