|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14369
- 金币
- 2470
- 威望
- 1647
- 贡献
- 1418
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! Z0 h6 T, ~7 `4 _. }关键在于：max-width:780px;以及下面那行。9 W* E0 e) g* M- L+ q; P, u
固定像素适应:3 {1 [! p: ]+ n6 V1 j( R
/ D& ?+ w4 T# L1 y# T) e2 rdotted; 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> 以下是引用片段：
" t; h5 R# r' N( H/ N<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 Z: G0 b: Q7 k9 j, B" q- H- M
<html xmlns="http://www.w3.org/1999/xhtml";> ' R6 w9 i5 g# p I
<head>
% q' f/ j+ Y$ C( q$ d$ n) q<meta http-equiv="Content-Type" c />
- `/ Z- P$ e! c8 t9 K<title>css2.0 VS ie</title>
& F E' ]* t' {7 |1 M6 Q% [: p<style type="text/css">
+ L/ A4 A) R# O/ Z! m! e# m<!-- % T. G; c7 t4 T1 X6 R3 Z: c5 a
body { . G1 y: u+ w# P0 u4 h5 m
font-size: 12px; 1 U3 q1 D' r7 r# g4 g9 E% V$ l
text-align: center; & d& T; A: F& o1 g
margin: 0px; ( m& G" e, t% d; Q
padding: 0px;
1 C, d; O$ e' x6 u0 [0 B+ j} % x' K+ u' l8 d5 h& o
#pic{
% y' s9 f& }3 Y; K& O( ? margin:0 auto; : R1 q- Q9 f8 i4 Y4 I" B
width:800px; 9 K) R( {' x0 c: c. z5 N& F& |9 l
padding:0;
2 [- Z0 d3 Z- N" c0 ?" p border:1px solid #333; 1 f: I- ^0 J* }& o6 O1 z% _& t
} , `# O, P, p0 x) V- p5 g. m
#pic img{ % t2 Z: B! K: S: t h4 q1 ~- |
max-width:780px;
. T% H9 d( Q0 f' ~width:expression(document.body.clientWidth > 780? "780px": "auto" ); & B9 H: U3 ^$ N( p6 a' [0 ]" V
border:1px dashed #000;
9 K x: j* c* F8 ?+ [} 0 m7 l) C- G% H2 F: J* o, |1 D! F
-->
* g. ^# O3 ~7 H# J9 Q" B</style> ; ?' D( m8 M$ C! K, C: ]* W) B
</head> . H" n p* S U
<body> 5 o, i; X9 B3 E* `" [
<div id="pic"> & g' b# p6 J4 Z+ Y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 { ~7 ~7 h, O0 A, w, n, i
</div>
, X/ w5 w+ z ? j: R7 P8 H</body>
+ k! i3 w4 Z, x9 p: b</html>
$ R/ R' y+ Q* K& i/ s/ v1 L, }6 ?" c3 d! K
百分比适应:
8 u7 o! f% }/ C1 F X以下是引用片段：" n& h3 _. [4 j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 Y0 |9 n9 S4 }& D1 x<html xmlns="http://www.w3.org/1999/xhtml";> * F4 V1 \& q/ ^* |) {
<head> ; u+ m& F- b$ B' P [) u( Z
<meta http-equiv="Content-Type" c /> C1 u& ~5 e, f: E" G8 ^, o b2 @
<title>css2.0 VS ie</title>
' K5 `4 r* I; i# d0 q1 ?<style type="text/css">
( O& M! _. G# |& C" ^<!--
, }, D9 P& H* t' ?6 X4 ]* ]# Vbody {
1 H: ^9 i1 c; f1 o8 Qfont-size: 12px;
' S- j. x) M- i* Qtext-align: center; $ T, M* w- t& f4 s* r( K
margin: 0px; ' z5 }4 {. S- m0 X
padding: 0px; + z- E4 R* I0 ~0 w- A8 W
} # [. c# Q( }# Y& g& }5 A) L
#pic{
- ?7 G7 o+ W" q. c0 W U6 S A margin:0 auto; % u# R: R6 j) n8 Q
width:800px;
, K) x/ ? m& G% a4 j padding:0; - D. U1 n+ x* Y
border:1px solid #333; ( C# I2 f$ ^- _8 ^# E6 J; ]6 D
} 2 l" |- z6 L+ J* \- f, f
#pic img{
9 h! l& J& p8 b8 C/ _+ H# q7 Z1 a max-width:780px;
5 F# X. h0 }( b, awidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 8 ?0 h5 s$ `. I+ s
border:1px dashed #000;
1 A% A0 {1 b( T} , E5 ^" I. j9 F( B' R0 S
--> 5 }' J q ^; ]
</style>
5 I7 \2 ^( n; _3 S( E) D- s</head>
7 A- X# F; c- Z9 I) x2 p<body>
5 [" k _2 H I! F# X+ {/ Y<div id="pic"> " j% \! L" K5 x: l+ p) H
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 K$ F5 l6 [ Q: l</div> * H, c$ q* F/ a8 [; ^2 Z) S+ D2 R
</body> / P7 s/ `$ o! C
</html> |
|
发表于 2007-12-8 14:55
| 