|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14397
- 金币
- 2484
- 威望
- 1647
- 贡献
- 1432
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。4 M- l k' |, `! s7 `$ i
关键在于：max-width:780px;以及下面那行。& \( f! V5 t% @7 _5 U) I* F3 a
固定像素适应:, v: J! l/ }5 H l3 o
- e' [7 m \7 f; A3 w, ]' c4 j# |& ]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> 以下是引用片段：
7 [' B! X8 U1 c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, u* o* l% m D; u' Y" h7 m<html xmlns="http://www.w3.org/1999/xhtml";> ; u: Q1 M" o* H" E ]5 E9 s8 W
<head>
8 E0 t( n" P4 k- S8 n<meta http-equiv="Content-Type" c /> ; [0 s9 C' `& l- H7 j
<title>css2.0 VS ie</title> % j E2 \9 U* w' h1 q* [% k
<style type="text/css"> 1 a8 p# f/ W( U7 B1 U
<!-- ' ?# E0 v6 f9 f9 S5 ]; T' J
body {
! {! [$ {! P2 M: @font-size: 12px; ; r, h' M9 z: ]( d2 a; p! G: z
text-align: center; ; a9 g' d4 U6 J" P0 d6 l: ?
margin: 0px; 4 B k) k8 z2 @- i2 h* b
padding: 0px;
0 P* Q/ ~" K+ n}
1 ~ V7 [' L# V# a# i2 Y. F#pic{
' g+ k$ ~2 r# t9 s margin:0 auto;
0 m& c7 Q6 e8 f% o Z width:800px; $ ~6 p6 l; A/ k) t8 o
padding:0; & D0 [" `0 g3 d K7 C
border:1px solid #333;
5 `. a2 c% }+ e6 u8 w' n }
. n( F9 d. a. S& @) C#pic img{ % N, `' x' x5 v( I( Q/ `2 E
max-width:780px; 1 m) C+ o* L: m: m, Y0 `( n
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 8 p: r- O f" R
border:1px dashed #000; , F9 {2 _4 Z* I2 F
}
; d1 R# s3 H Z* u! D: a-->
4 z$ T6 t: `# i# x( Y! \* S</style> ! W% U1 }9 t( w# q- q; c3 D+ ]5 K
</head>
1 R+ l9 c9 ]$ p. F# H<body> . y0 `4 M& q$ Z8 @! T
<div id="pic"> . z/ ^# v* ^5 C0 [7 j( I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 b8 [+ y4 M1 a' W" o3 ?</div>
$ \ D$ C+ |& e2 N, t, @9 v( v</body>
7 p h X5 m! t; \" C) X/ I- h" x</html>
, h C3 b" X1 t2 `" k: t# x& x4 ?/ E2 v, g. R' j' x
百分比适应:9 @' ?" B; v3 w9 |) O% `
以下是引用片段：. l1 n: l" ^8 Q/ K G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% I# _, H" N0 ?. J9 G, D<html xmlns="http://www.w3.org/1999/xhtml";>
- c3 R. S: `1 a$ w1 P3 E<head> . y5 Q4 b5 Z# k" @% a
<meta http-equiv="Content-Type" c />
4 W) ?; j, `' v3 ?" ?- b2 |# H<title>css2.0 VS ie</title>
5 B2 `3 B j- v' s1 A2 A. r$ B<style type="text/css">
3 R1 @# ^5 L; H$ f$ \' T4 {. X<!-- % J* j) s$ @$ G5 q
body { - C4 d9 w4 h. c y& o0 d' Q
font-size: 12px;
7 x' G: j! {3 d' q# Otext-align: center; , N8 E2 A$ I' N2 A( K
margin: 0px;
4 ?0 E# Z1 [3 Y0 ypadding: 0px; 1 v/ D9 g3 F* c5 w; ^
}
- N4 w5 O8 w2 m+ L$ ~3 a" H#pic{
$ V4 \( q8 ]" y1 M1 [$ c% \ margin:0 auto; & m( S+ N6 L, x, c% e$ i; M
width:800px;
1 j4 J3 M: U9 \# J" `" z padding:0;
: a* t" `, Q7 e border:1px solid #333;
! }$ u6 [& m$ E! G G/ J6 d } " j8 q6 c1 [9 D" Z
#pic img{
, H, g2 ?. _6 P; J0 G# j( l8 l% z max-width:780px; - _, F3 X8 J! I5 R4 Y) v0 D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ) U; `$ d! u+ N8 r
border:1px dashed #000;
1 S* f5 A5 S! M1 c3 h6 t! A} ( n" Y; h; c, O$ U
-->
8 u$ L9 T2 p; L; v) T2 y6 i</style> . F; C% t Q! U3 Q
</head>
; U) n# Y; |* t4 r* N<body>
# L5 N; ~5 { s1 v" d<div id="pic"> / t0 S2 E5 ^% ^$ S9 y# S8 z$ E: h
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: T* B3 D! G8 I& L</div> 9 f, o) ~5 i& d) w7 z4 Y) w
</body>
6 W5 s9 K! I7 W, l+ f* g</html> |
|
发表于 2007-12-8 14:55
| 