|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14413
- 金币
- 2492
- 威望
- 1647
- 贡献
- 1440
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 b$ v' D+ ~7 W0 _关键在于：max-width:780px;以及下面那行。3 b/ z! ~; Q( t3 v
固定像素适应:* h* J; w" q: v( X. r
; r. x( a n4 M5 z/ h d$ h* \
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> 以下是引用片段：
, x) X4 I+ a9 X" O+ B<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 J, v7 U* ~' C8 k<html xmlns="http://www.w3.org/1999/xhtml";> 0 |+ V( X9 m* L9 q1 B" A2 ~4 G
<head> ! n. z/ U( `9 d2 y$ Q# [8 X% {+ _
<meta http-equiv="Content-Type" c />
" O: p$ b3 @" W+ w8 P<title>css2.0 VS ie</title> ) u9 L' r* D. A, \( ?6 W: X
<style type="text/css"> ; v4 E) P. \& B# k
<!-- 1 K/ z; e* p% u! A6 x2 k, G7 X2 l
body { . t2 }# q$ I& {% q r
font-size: 12px;
4 I7 N: O" R; _8 H+ L: [% Rtext-align: center; 8 X8 X! s2 E5 A, w
margin: 0px; x* P& [( F& k9 j& ^
padding: 0px; 6 ]' h9 I5 a8 h' B
} 4 W% }4 B( S; ~- P, l% ? P
#pic{
. _6 G- {* V d5 x# c7 x S" Z2 O margin:0 auto; 5 F! V3 T, v4 a. b
width:800px;
. E: k3 a" _; G, | padding:0; 2 |% A' q8 C. X9 p* M9 D
border:1px solid #333; 3 Y& |* J/ `% W1 t! u
}
9 `6 o6 j4 z- u! l# n$ M5 f* [; x#pic img{ * A# L8 Z6 K5 S& j; D' ?* A
max-width:780px;
0 \) q! s+ {. F% E+ Cwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 7 c, {8 A) K* c" y; B% \
border:1px dashed #000;
; @; r( s; U: \+ @3 Y} 1 v, G4 [8 @8 H/ V
-->
4 V; d( I1 ^0 O/ d</style> 6 C0 _1 P/ W/ I2 w2 S
</head> ' f0 S7 A+ d& Q* [& W9 |' E) m' E
<body>
% i% i1 m# C4 C<div id="pic"> 0 d& @# B8 k' [ ~# p0 ^( B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + P6 T1 o& x1 t
</div>
- ]% i0 D0 t5 n: o- {; E E</body>
: E! x l6 }, n</html> 7 i( m' s. t$ C6 j, T" C, ~, a ?# Y
% J# [3 s, `, W8 i# F9 B; z" k
百分比适应:& A/ s: G( h! A, D& t8 Z( N) H
以下是引用片段：
- \; `. T9 S- }- I( q2 V" Y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 V3 {% q! x9 b% h
<html xmlns="http://www.w3.org/1999/xhtml";> ! E1 M& G* E( P- r& g+ U4 m1 O
<head> " w/ a, L' [+ p6 Y5 q7 H5 ?4 I
<meta http-equiv="Content-Type" c /> 6 s/ |! s& g2 z2 Z3 Y& [
<title>css2.0 VS ie</title>
: H3 n, Y }- n) |1 c<style type="text/css"> , @) m6 G* n4 t; N4 E* w0 ~4 C
<!-- 2 A7 m& d! o S
body { - z1 _# l+ P2 W$ W# @
font-size: 12px; # P/ K) _* ^# C* a. X
text-align: center;
/ T- l7 B! ]) d2 _' t" J% rmargin: 0px; - R' Q6 l" ?. e+ t% }
padding: 0px; 6 d; c [+ X H; W9 B
} ; o, J/ [( ^8 r [; J* b& N- {
#pic{ ( \$ q m8 N" w& B6 y% m
margin:0 auto;
( [! a5 A+ x0 c' F4 @ width:800px;
& f3 G8 |( {2 B4 R/ S) ] R1 _) H) L" } padding:0;
# G$ M& F1 B% u3 U2 w border:1px solid #333; 0 W$ V) m2 A- n
} , M L8 f* {$ a' Y
#pic img{
+ D5 r; i4 s% |8 F" i3 m max-width:780px; 9 J& C4 d4 F- C" w: a( D9 L! j3 c
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 3 H2 N6 F; v, t: X+ M
border:1px dashed #000; : I+ \' M; _1 Y; k- }2 V/ L' K2 k b
}
; V% E& \; W/ o) `6 W--> 1 ~: z" P% l3 V+ N4 k# G
</style> / A. v* S6 g/ j' k! H9 ]
</head>
+ W- C) k& x: {9 h2 W<body> 7 ~" `, v$ p2 O+ v/ ^9 }
<div id="pic">
* M: l+ H2 v5 A5 [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : u! X" n1 A5 t# z
</div>
$ l! {; q: t( u# e2 J) M6 S; x3 F</body> j/ P/ o7 r% G2 o7 ~" s& |
</html> |
|
发表于 2007-12-8 14:55
| 