|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
% Y9 o, M: F! _关键在于：max-width:780px;以及下面那行。
- V9 J3 a T0 c+ J固定像素适应:
O9 e; F/ }; w" |5 _5 m/ d
% ~7 H: q* k5 n5 g4 A) {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> 以下是引用片段：
6 ?% V. B$ E: z/ X& C3 m5 J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% _; e, Q: Z& b: V6 ]# X: J& @& T<html xmlns="http://www.w3.org/1999/xhtml";>
7 U: Z5 _. ^: J" N<head> ) r2 V( G9 \, d/ K; A
<meta http-equiv="Content-Type" c />
5 h( H6 J( G, L+ w4 F5 K<title>css2.0 VS ie</title>
7 |$ _4 v9 @# u" |8 `4 s) m# f( i<style type="text/css">
( ^1 K( h7 |4 `$ |<!--
) f! f' v4 _9 T% V* Z: sbody {
, T7 ?1 d3 b8 e$ B4 kfont-size: 12px; / |' j9 o4 |1 e' L
text-align: center;
6 I1 J8 `+ \% Z5 A- J' bmargin: 0px; : I7 U8 x4 q; N B6 c2 q" O
padding: 0px; 3 t; d" \( m2 E k5 d
}
3 Y5 O% b' x# H( h- @8 o; Q- c#pic{ : q$ A7 K9 j& n k7 V
margin:0 auto; 1 r: Z9 r* n; \% l$ S
width:800px;
3 \' d$ P7 g0 @- C _; z padding:0; * o, P) s. m! Y" G* n5 w; K/ @3 e+ g" U
border:1px solid #333; / Y6 O2 t( c. A8 n: u' Z
} ' x' D) ~2 v1 r9 q
#pic img{ & u- S; S/ C! b* M9 Y
max-width:780px; : ^" S$ G' w; t* A( o8 @: Q' [
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ( v4 ^# a9 U2 n4 r9 F
border:1px dashed #000;
. l; ^7 e/ V9 p( ~, }}
; R7 G. `" O7 e+ U" f/ B/ v7 c$ R; }# S--> / ~% K4 L. S, \: l
</style>
. ^! J$ x; i4 R' _- G</head> " S3 k% ?: f% {& `8 `7 z
<body>
) X8 s3 p, L: c# I& k<div id="pic">
( F/ ?" C0 G1 W# s' S<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" _/ r u3 A! R; O% ?</div> 9 w- R( F3 p* r4 |" k1 E: s6 N
</body> ! L: H1 w) v3 d5 g* ]' S
</html> / r- H5 A& H" q" A2 @8 x' @
) K/ o, ~' u; ?# A7 B
百分比适应:
& G: p8 V' V/ o5 l+ [6 V! [+ N以下是引用片段：; O" V- v. Q! c) _. {1 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ y$ [/ b) _& p& d- S<html xmlns="http://www.w3.org/1999/xhtml";> / r% h* ]+ {5 H* k1 [9 v
<head>
5 }) o# W6 I" I+ I' H& P9 q5 I<meta http-equiv="Content-Type" c /> + w$ ~1 B" p4 b
<title>css2.0 VS ie</title> / o( R% |* z7 Y) W# c- m# v" H
<style type="text/css"> ( o. x# x/ q! f( u9 n
<!--
- d6 t' {, ^+ B! n$ a/ y( Dbody { " j0 ?+ d5 p4 v6 m% B
font-size: 12px;
+ ?) k# w* d2 H$ |text-align: center; " ?5 _/ c5 n& F8 y
margin: 0px;
r9 f: P9 v4 J. }padding: 0px;
" L2 B0 B, G9 m& }: d2 i}
7 u. U F* a+ o0 y! w% K4 C- o#pic{ ' X8 h4 C* _$ H5 B
margin:0 auto;
& s, o( _* m" s9 j w. J width:800px;
" T7 G8 p) `" B g padding:0;
}: c, s1 ~: C& w! {4 [ border:1px solid #333;
4 E1 i) {, J1 _- C6 {( D* Y }
8 T# {$ Q/ D0 r% H#pic img{
/ b/ `& \. m9 R% V' [$ }1 O max-width:780px; ' b5 u" w, Y. d: l
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 `: {7 T5 Y0 f* t6 C2 S' dborder:1px dashed #000; * t5 }9 S) J# s L2 C
}
, f! W8 ~5 S. @5 y7 _: j* W) b-->
4 X9 Y* u9 } k</style> * q. C2 x3 A/ U `( d- C0 H5 e# T
</head>
! C( _( M/ f* L- M: B8 U/ R<body>
6 j2 R* c7 W" x" [<div id="pic"> b: T/ M2 I" h; `
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % |5 N8 y/ {5 r# _1 _4 b
</div> % g0 J& C7 d) x+ r$ F3 ]9 K
</body> ! K0 m3 s' m, N! s5 p/ \9 h
</html> |
|
发表于 2007-12-8 14:55
| 