|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14173
- 金币
- 2377
- 威望
- 1647
- 贡献
- 1325
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% @ S3 H( }4 a1 d0 i0 b
关键在于：max-width:780px;以及下面那行。
: _% W( S, U3 D1 K+ N固定像素适应:
( t4 Q) D, L& v) t3 ?, }. ~9 {) Z. [+ j3 s, V3 E2 c/ Z
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> 以下是引用片段：% ]! ` ]- d% |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
t8 m2 a& e2 y D8 E4 }" G- h1 N& [<html xmlns="http://www.w3.org/1999/xhtml";>
) d _1 k, v/ S. n9 B. e<head> $ A5 D2 n8 L1 f% P
<meta http-equiv="Content-Type" c />
X. _0 G; \+ Q6 t* f9 z* ^5 j7 u5 s<title>css2.0 VS ie</title> # \) u. B$ C/ V5 o' r
<style type="text/css">
3 \1 E) ^; _9 |3 t8 C<!--
- | s2 i; p3 vbody {
( r* V8 X& s' J8 l2 S8 Ifont-size: 12px;
' V1 x" E- {8 t$ _text-align: center; w, _5 R5 C. H8 g9 g, g
margin: 0px; % I$ j9 h; p6 q/ J+ U7 ]
padding: 0px;
. C$ C' ~% M$ c' k& B, P$ ^} ; k4 [: [4 y! a n8 ?, H, [
#pic{
: i1 z E, q( T, H margin:0 auto;
! r& P% X$ G1 j8 j/ X W) M1 r( N+ h8 U width:800px; # t3 y7 O' `5 v- G0 v; o- V3 I
padding:0; ( u% g9 z% {2 D( \+ `* A/ s& t
border:1px solid #333;
3 C# Z) g% |. y7 @) D" P }
: t6 \! f( F2 P4 W! O; g#pic img{ ! l6 C9 o: C( U" V$ z+ b1 l
max-width:780px;
/ ~1 X1 _. Z) B3 U' @; h2 Nwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); / J' U% r! ]. T' Z: K8 b
border:1px dashed #000; # w8 j5 _. D9 p0 g7 u
} # T) M0 ^0 ]1 Z
-->
7 f- m6 ] L( Z- k+ X3 H- P</style> 6 K. @4 z0 s! C* ^1 e
</head>
/ M4 a C6 T- e4 U; W* x3 P<body>
* v0 u# w4 M& E9 V% j; T<div id="pic">
: C& Q" O$ b/ {. S( S8 C* P' o<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' E; x; d- H; y3 M! Y b% t
</div> # { }; X }# @# R [* w
</body>
9 f* i8 [- y7 z3 x/ U</html>
4 v/ {+ M( k! x' K4 v/ V' z& S2 r
* { h/ A: i* K" N% W; w8 K, f百分比适应:
N3 m, p/ z( }/ A以下是引用片段：. D9 x4 j, V; z) z- W; f( a5 `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( }4 y. K6 o- A. N7 Z) o1 ]- O. b<html xmlns="http://www.w3.org/1999/xhtml";>
5 x9 q+ F0 Z& ?3 L! ?<head>
$ y3 A6 C" ?- J: d7 c" S& {6 r. f<meta http-equiv="Content-Type" c />
( |* M& f* G$ T) k/ r<title>css2.0 VS ie</title> 9 {! R; l4 I8 i: r) e3 {
<style type="text/css"> 3 O% D. s; {9 C( S; @, m J
<!--
) Z& c% h( ~/ ^& \% P" l' x( a( Wbody { ( W) v# {2 p/ F, x B9 h
font-size: 12px;
3 T5 u" J% E. c3 v2 z4 ^text-align: center;
' l. ]) `# T0 W0 j7 M9 Wmargin: 0px; ) u0 c: B( n' C1 i& u: X
padding: 0px;
$ g# X. M4 _+ M} - O/ \6 w! b( f" r
#pic{ 8 E- Z6 f: X) w+ x: [$ E
margin:0 auto;
# m) q. F& W, V* ]* \# n0 ?! x( z+ {7 X width:800px; + `1 L( t1 n h
padding:0; 8 w) N! m" I7 a- l L$ `
border:1px solid #333;
+ ~9 [* W* m. e! z1 r# [ }
/ w# ^ q, g! T1 f R% R l#pic img{
; B$ R% T$ h- v! A s6 B. v: g% m3 [ max-width:780px; , T1 z' L8 A7 `/ H5 K3 a/ w2 t. j
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 x% a) T: Y! r" d7 _/ Dborder:1px dashed #000;
/ V& p4 O7 t0 `7 D1 S' B$ Q5 F}
0 N! e- M# ? S2 r9 a. j/ g-->
. M) t6 G0 K# @8 p% ~1 N</style>
% L# v, F- U/ R1 A( S</head>
) F9 {6 u% v5 x<body> " C! R( D3 f9 w+ h: ]3 V
<div id="pic"> X+ W4 r4 V8 j& `, w& x; v
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ h9 ~5 u7 t, s; h3 `. m3 i# g</div>
T$ w8 U& o) Z# t D$ [% h: v</body>
+ f* G) ?1 G! @, ?% L! D! D6 n</html> |
|
发表于 2007-12-8 14:55
| 