|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14349
- 金币
- 2460
- 威望
- 1647
- 贡献
- 1408
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。; D" X8 z& n' H7 \
关键在于：max-width:780px;以及下面那行。" g F" Q6 e3 h! @$ N) d5 a
固定像素适应: {% m1 O# h9 i" `
, H8 K' W5 a) c* @5 mdotted; 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> 以下是引用片段：$ K$ `4 a; |! f. M8 s% u T' m; y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! Z; [ ]0 G; ^' D; q! W8 o7 g- c4 w$ a<html xmlns="http://www.w3.org/1999/xhtml";> 0 ^$ v* A- c u1 _ Z! b8 N
<head>
8 m1 _' d( A& q; H1 `8 `) V# a( V<meta http-equiv="Content-Type" c /> - y( m8 F, e0 s6 s
<title>css2.0 VS ie</title> 8 {/ U6 K- c8 K: L- X
<style type="text/css"> + R7 E* J. F; L: P. i7 X! c5 Z" i
<!-- n- a' @, q% m, k
body {
1 ?: z0 S w! E7 V* wfont-size: 12px; & Y* r: _3 M, S M1 B: ]
text-align: center;
# V6 u% r0 T1 {. gmargin: 0px; 4 U( N7 D9 i- N! o4 i
padding: 0px;
2 L! V5 m, p/ e}
: P* o1 V/ V. W* z# J, p8 g& ^3 W#pic{ " f/ k& [# V; K: {3 B7 ~1 X( [
margin:0 auto;
. ?- c: \6 H4 G4 b) E+ G width:800px;
; l' h7 L7 K* v$ U: F padding:0;
, V, ?$ |4 Z3 i% P border:1px solid #333; X! b+ M8 d" H% E) |6 V
} 6 E. y% {5 S# H, M, X5 O5 l
#pic img{
7 }9 p* W: A! j% P max-width:780px;
% }' ?3 p8 N. {1 ?* b8 c: Y& E" }width:expression(document.body.clientWidth > 780? "780px": "auto" );
6 w; ]8 x8 g Y }border:1px dashed #000;
9 O1 _% |6 q$ l, h6 s* B} 3 c' o6 y% v/ u$ F- E! ^
--> ' K7 k2 M6 G5 `1 d4 E6 _+ d3 }
</style>
+ ]9 j# W, b3 x0 I: f</head>
7 w9 t3 @9 p7 k7 j<body> 2 a- b" J4 M ]5 v/ v
<div id="pic"> " K, E& w# X& N1 f" T e2 s
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ O9 y% n4 y% d4 k0 t8 U</div> 5 u$ i8 j* r2 B i
</body>
~* d$ u9 e9 W% |" v</html> 4 B6 L- i9 F6 X' U
# e3 P q; i; l) @& n6 a百分比适应:
3 i0 q& T4 l/ p1 v% b" C6 `3 J4 }4 f以下是引用片段：# y: h/ x S& N, D5 o! Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! B6 q4 J: [+ u- k' \0 c# T$ Z# P9 s
<html xmlns="http://www.w3.org/1999/xhtml";>
) f. N+ n# q4 L0 A6 {% n7 S/ U<head> ! s2 w& a0 A/ `) y& j* @4 k
<meta http-equiv="Content-Type" c />
( G1 M& h3 `! V% p' t! S; j; Q<title>css2.0 VS ie</title> 3 H+ A1 d, d/ a" Y( G
<style type="text/css">
7 [, [/ ^7 M, k<!-- n+ `, q7 h: g4 ^( B
body { ) o5 H4 D/ F0 D- H5 r( N' P; S
font-size: 12px; + d4 B$ _! ^: A; r
text-align: center; K, h0 G& p2 N$ O$ h# k1 n. E" _
margin: 0px;
6 i4 r0 A5 N; y: b, epadding: 0px; 9 d6 p f4 U8 C
} 3 \# u c/ f H6 G5 r
#pic{
- Y$ o4 N# ]1 {& W& e" p margin:0 auto;
, i& ^0 ~/ U# v7 I% r K width:800px;
4 w% }9 D- j' ^- H7 r padding:0;
" T& S% x8 Q* E) W; D/ T8 u ? border:1px solid #333;
$ {! ~- j- N: I } 5 K" ^5 d) f0 V' }9 p
#pic img{
. _9 y |3 D. D max-width:780px;
4 X' O5 m. t2 y7 h: _( [4 K5 Y" iwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 9 y4 ~ R2 F6 y, K& [
border:1px dashed #000; ; t1 h. F i' P1 B! o) X+ q
}
. b" i* T; S: A1 B-->
; A9 N9 h. Y* X. A2 \. `' W</style> ' }2 d% s4 y1 |0 T" K
</head> # I9 G; f/ `, n' N4 I& [; c
<body> 0 ~0 O6 a+ Y& |' V& S0 Q$ }* ~
<div id="pic"> , ~5 j* D7 N) A' M& T. U
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* f6 b& g* `3 b- ~6 G</div> & m! x F( M4 B8 L& T Y5 w
</body>
6 U' `% o5 i8 ~. B1 L+ T</html> |
|
发表于 2007-12-8 14:55
| 