|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。& \/ w. P1 _) y `5 e# C$ _
关键在于：max-width:780px;以及下面那行。
- [0 B1 }& b6 {6 g. B" Q4 f固定像素适应:
& Y7 T6 z U4 p9 {& W' ^: Y! e# b/ O+ Y$ S: \3 i: f% D+ D
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> 以下是引用片段：; I" B* T. I" T; N) H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( V! \# F* |( [<html xmlns="http://www.w3.org/1999/xhtml";> $ Z) q, h* w6 P! P
<head> % |) f, U3 Z* z$ k1 g+ O& w8 v
<meta http-equiv="Content-Type" c />
. j9 F7 K2 [2 r<title>css2.0 VS ie</title> " \8 `* D! Q7 c
<style type="text/css">
9 H4 T/ e7 N# q% w<!-- / {5 |) ~$ b" t1 y5 X! j1 h: A
body {
( B1 }! i; G F* {/ Lfont-size: 12px; . s) v2 E9 T! }+ k
text-align: center;
" O( a- ]( u8 Y- b. Y3 i( _margin: 0px; " J! m ]; q* f; B! \! L2 ^3 ?
padding: 0px; ~# B3 H0 N4 \) T' M- l& a) y0 p
}
+ j7 @% Z1 y$ I; k#pic{
! x* G* M: Q( V3 U9 j/ I margin:0 auto;
- F3 @$ z' d- V, H2 G, t width:800px;
8 X4 H" X8 S; p+ _ padding:0;
$ T2 l4 B' w* Y3 ?. K5 q$ n border:1px solid #333; ! N9 r1 G- c9 `1 l$ e$ C
} ) u9 G: W, M( |( D1 i7 p5 }2 R
#pic img{ ) q; N/ B/ [. \$ U ~7 _ B
max-width:780px;
1 J5 w i7 C" C9 W) Ywidth:expression(document.body.clientWidth > 780? "780px": "auto" );
& O" b k/ W) W! ~border:1px dashed #000; . y( V3 R, ^. J0 L; I4 \
}
, a) z! M: E3 P; {8 w" h" i @--> . U' u5 m x7 e m3 J* D8 b7 p
</style>
: P" U7 B" m, k3 [ ?</head>
5 @( w& c6 X& N. b<body>
) X& z6 p" u( L<div id="pic">
: b8 K# k4 \% p" I/ s) T; h3 ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / Q. B# c# I8 x6 c
</div> ; L* C! x- e" J# `6 L* \& P+ h
</body>
' k0 N" f) W1 r k- X</html>
9 [0 H, V. Q# U$ J& X# {$ n% v3 d, A" W+ S) y
百分比适应:
/ ?! |, Q& W9 q. y9 i& N以下是引用片段：, d) U. b: R: H. s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( R+ y. a7 Q1 A<html xmlns="http://www.w3.org/1999/xhtml";> - o2 R: s& Q- Q7 `: B+ i
<head> ( M m# ]" T2 _
<meta http-equiv="Content-Type" c /> ' W4 r- F/ _% L: v5 @8 R
<title>css2.0 VS ie</title> & o$ u! E) r+ S5 Y5 Z, e$ v8 i( g
<style type="text/css">
, W7 a+ t% }' }7 X<!--
6 q4 z4 v7 I& P, R- S' l: L, Jbody {
, ~- F& `7 j G% \font-size: 12px;
9 O! G% G- m- g* J6 ^' Atext-align: center; $ X l7 d) O! k! p$ _% ]5 ?
margin: 0px; 4 h2 t1 }* h7 ~" m- k
padding: 0px;
9 V u7 |0 B3 \3 a}
4 }8 s( a- |5 o5 V9 ~2 L$ Z#pic{
# _1 D3 O8 Q8 R2 \# |+ M2 ?* b margin:0 auto;
9 N$ h5 j! p5 R0 J" K$ `- B width:800px;
% Y- x( w* P5 l3 L) H padding:0; # Q/ X+ g! O9 v6 Q9 L$ D6 [
border:1px solid #333;
& g0 d% k2 t( D% o6 T( U6 l* O }
, x$ ?( g. V/ A& _1 H8 G#pic img{
, @5 |5 S* r+ Y3 H5 h. v c max-width:780px; ' A; ^+ A" [ t8 ]
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" C* e) u( I* h0 E0 I2 hborder:1px dashed #000; 5 k$ x' Z) q+ [4 q1 a1 a2 c
} 3 p$ t: B# k! Z2 D7 l# R( |
-->
% v; ?4 }5 `: P* w</style>
R8 T6 X+ [0 u* b</head> K }* N& X. N5 _4 F4 a
<body> 1 S ?9 w B2 N
<div id="pic">
1 d0 Y+ ]3 D$ h, a, r* |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * M% Q8 p; Y N
</div>
b/ `' {: W3 [: g</body> v$ W8 R- w& T6 z, Y9 @
</html> |
|
发表于 2007-12-8 14:55
| 