|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
, a5 n) _" w8 `/ e关键在于：max-width:780px;以及下面那行。
4 R6 q) k; o' n$ s2 |" W H固定像素适应:( u! d1 x0 x& Q f- _
: s5 T2 u# C* K# q5 Ydotted; 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> 以下是引用片段：
* Y5 [% u! z, }, I& g% C* X- d<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 V. \6 O) X8 @6 A" e4 _<html xmlns="http://www.w3.org/1999/xhtml";>
# q1 }& u- ~, x* J<head>
4 W Y! J8 @; n<meta http-equiv="Content-Type" c /> 6 L, ?8 }' R5 |6 u
<title>css2.0 VS ie</title>
/ i" T* S2 v7 O; }1 E<style type="text/css"> - o7 t7 |, i* K7 e- l
<!-- ; R1 T! K: p: x+ \
body {
) V& ]- j% Y0 dfont-size: 12px;
& ]. i: [3 ]9 g m% H/ G; {text-align: center;
, o+ q7 A3 x, \+ H& {margin: 0px; , A$ x& J& P, w+ E
padding: 0px; 2 b1 F9 f3 x% c9 c
} 6 I- K* y: \) O+ x0 r
#pic{
! m/ W0 V+ U; u& _ margin:0 auto;
; U- C1 L: R4 b9 q width:800px;
7 B7 l% l, P& R7 x( L4 g padding:0; 7 y2 ]& Y. i3 |: m% g$ z
border:1px solid #333;
8 l' I! ?3 b" b } 5 r2 L# I) w" a3 k' k& d
#pic img{
5 M: D/ }+ Q) v2 N. f max-width:780px;
; d+ m7 @7 E% Z4 I- ~ gwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
$ `6 p9 \! r1 m# Nborder:1px dashed #000;
# t# L6 o; E. M7 F( t} ; A/ i, M$ R" p* j+ J: @* S6 `; E9 O
--> 1 a( p9 n8 d! b9 A- Z
</style>
" e0 U7 g) B3 |</head> + Z4 L9 M4 @. m
<body> : y' N) l6 C, P' B. {
<div id="pic"> 7 c% d9 v7 a& B1 @% i! r+ [5 P
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , O! F4 K, x1 f. d& ?' k% Z" O& z
</div> ) K4 v! e, |1 J% j* Q
</body> 1 ^8 T/ g5 _% U+ M+ R1 x, j
</html> 2 E5 i4 c$ G1 o( D# X5 {* V
3 g$ O( @/ |$ ^1 C5 z
百分比适应:
! s4 K+ ?9 u( X, x" x: N2 `以下是引用片段：
9 T) C5 }' N& _% }# \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + _9 p; L6 W1 i7 n) g3 `5 S
<html xmlns="http://www.w3.org/1999/xhtml";> . ] q. y& f# T( B. f7 S
<head> 9 N; ~ @ |( z& X: M$ l; u: t1 G
<meta http-equiv="Content-Type" c />
, u2 _+ B+ ?: D4 E' @; V' x<title>css2.0 VS ie</title>
" y2 ~4 g, j) }. a! Q$ z0 S<style type="text/css">
' y9 Z, Y% I) z! v( D2 j- |<!--
2 p0 p5 v8 L# a R$ ~% }body { # ~6 S/ ]$ Z& n- _/ o; j' G
font-size: 12px;
1 R- T E; u0 y4 a* ytext-align: center;
7 i. ^9 H2 h f) \- w: `# J1 Gmargin: 0px; 9 T: w3 `& x' j/ m+ ]
padding: 0px;
( X$ p7 L( {, m' L- G1 Y, r) U}
% O# o# W9 ?6 i3 u. x. m#pic{ / b V, G3 J, e
margin:0 auto;
' e" V" j) z( R, P+ U# ]9 J width:800px; - K* @$ i) E( n0 x1 f
padding:0; ; t+ Z* J6 A$ W1 p( l' Z( ^2 o
border:1px solid #333;
( i1 H8 v$ r3 z; T6 Y }
" e( s/ \! x4 h9 ]6 s" V# y+ R#pic img{
. s; J- j6 p9 U! X6 m6 d# ~0 P max-width:780px;
" T) S! s' U( `; o9 A6 ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ r: Z- A. \/ x9 B$ Cborder:1px dashed #000; 9 s, P L9 a& F7 J$ S2 v
}
, H# u ^/ n. R-->
8 W$ O4 d( W. W4 C$ ^</style>
$ I" [$ T3 o7 Z m0 v</head> $ _( V" S+ K. X; k
<body>
6 Z* o, x* ~* |2 P; S+ U! U<div id="pic">
/ J4 X$ t4 }) v<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . t9 i+ d, K; t
</div> 7 w& s( H) U/ H; ^/ x) C
</body>
: v; G* G. V& f0 V</html> |
|
发表于 2007-12-8 14:55
| 