|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 u7 D* z6 n' |8 i7 u- T% E5 K关键在于：max-width:780px;以及下面那行。! E: ^* _6 L* w+ c
固定像素适应:
3 C4 j) v- D, x2 t
! ]' U R! `* Q5 {- tdotted; 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> 以下是引用片段：
9 H0 b' O) |2 w; k/ g1 p5 ^$ @<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 `; \5 ^7 ~6 L
<html xmlns="http://www.w3.org/1999/xhtml";>
0 ^! _4 K+ B- V8 S<head> ! W6 `$ d" K$ {3 v$ Z
<meta http-equiv="Content-Type" c />
. x1 Q' l4 u! ?# D4 b3 {<title>css2.0 VS ie</title> 8 Y6 V k( @2 v/ w
<style type="text/css">
8 q; R* O$ z9 }2 y<!--
4 i+ ~( l. p Y% A2 ybody {
; d& S* N) E9 D( Zfont-size: 12px;
7 y/ _3 U. F% P! G* `) Stext-align: center;
- B6 z$ {) d. s) [1 N' W( Qmargin: 0px; . S' ]1 W. z* y4 n1 o
padding: 0px; : f4 o) {6 n; _3 C9 {3 u
} # o( T% J- t& u4 p2 O$ y2 y+ A, K- q: V
#pic{ ! ?8 D3 {" O( x0 \ v4 D H$ s
margin:0 auto;
: k6 z& R5 B5 k0 e, C/ _( {) V width:800px; ) I$ z& l: B I" @: s
padding:0;
( k4 Y# ~/ q% I' h+ @6 j8 u+ `! R3 ? border:1px solid #333; 9 L- _2 u9 F/ U% N: D/ I' q+ T p: t7 g
} 2 g& P0 a0 I( n# R
#pic img{ ; [, p5 Z) z9 }- Y
max-width:780px;
! W# b; C4 y3 G C+ P9 Pwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 y0 W2 ], e" r% k7 h5 J
border:1px dashed #000;
& K( g8 U$ U7 [; J' ~1 S) O% `}
9 ?3 A1 U+ T0 n! N6 x--> 5 Y$ v, A3 n6 o* a' p$ |) k
</style>
3 @0 N; K$ ?, V3 S3 W* b</head>
1 Q0 q1 Y" p$ ?. Z# K- ?1 @$ C<body> - I$ F' i8 h. d3 j2 s$ o
<div id="pic"> " v3 v3 q- g- Y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) f1 i. R4 J6 m7 M, V. t
</div>
' v) j v7 j: O, I- K</body>
" l% [& I; K$ r/ F8 ?/ B w5 t& H</html>
3 C6 g+ \5 R" q0 R) |% F) c" A- l8 y; q
百分比适应:
* k' k1 @7 Q3 o* s以下是引用片段：3 e6 |" x9 @4 T d9 ? ?% ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 I4 Y$ ]; A; z" c# S, N/ |<html xmlns="http://www.w3.org/1999/xhtml";>
, f/ D M! s W$ Y9 W; X<head>
: q' g+ S# ^! ]- e$ _* I<meta http-equiv="Content-Type" c />
* Y9 O2 @7 T0 z; m$ T! s<title>css2.0 VS ie</title> - @% d- R5 X C1 j
<style type="text/css">
& L. M% J" Q3 @1 g<!--
& d4 C- N) }' q6 i' O" Mbody { ' W# Q% a0 B! T; }
font-size: 12px; 8 ]; m" F7 d( J+ o5 v$ `
text-align: center; ( V+ v) b* |9 E O9 ^4 |: B5 u
margin: 0px;
6 W! a' j- t A% _padding: 0px; ; J. F: O, z3 x U0 w1 z( ^
} " {, U$ Z' V* d/ ^- V3 k) }
#pic{
7 J/ X4 f# P. W2 c margin:0 auto;
( ~: p/ o' g, R3 v2 t' D! B width:800px;
7 F6 L$ B `2 z3 E padding:0; z0 j- R, n K6 J
border:1px solid #333;
e+ i6 f% u8 P1 o }
% M' s' P: N$ I; n#pic img{
* F* |3 i$ q& R! e( S6 v max-width:780px;
& l+ J+ z. v2 s- N. r2 b0 pwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " ]+ J# i2 L8 ~8 Q* k* E& ?+ s3 P
border:1px dashed #000;
! {& Z1 ^3 j; J} 3 i/ s4 T; V. ]- P V, Z
-->
8 a* ?+ C W h" M! N% `. g A8 v</style>
2 l* t9 S* K) D) M: h</head> - J# x- S; ~' t
<body> , V7 u- F6 t, ?
<div id="pic"> 9 ~, p, o- ^* v% k/ m: W
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , }- O- J; d, a! ]2 K
</div>
; A. v* l; w, t7 |% c: A</body>
6 d+ J; J8 R3 W8 G0 I2 B: {1 ^</html> |
|
发表于 2007-12-8 14:55
| 