|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14411
- 金币
- 2491
- 威望
- 1647
- 贡献
- 1439
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。3 M' V4 K, z5 W2 u2 T
关键在于：max-width:780px;以及下面那行。8 L7 S: V/ V8 `2 c2 b
固定像素适应:
) [" O8 N7 Y) x5 z: G# K+ ~/ m3 S3 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> 以下是引用片段：9 t W# ]% |, {0 r; l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: d# I2 k5 I: w& c8 x0 e<html xmlns="http://www.w3.org/1999/xhtml";>
' [! l0 ^2 d6 e<head>
$ ]' @/ H+ Y) L& u<meta http-equiv="Content-Type" c /> / o, k1 G5 p- V J3 E' O* S4 x+ S$ ]2 t
<title>css2.0 VS ie</title>
0 D2 J" |7 v* k: H% }8 _. D<style type="text/css"> $ ^- z2 s d. M1 f8 |4 H/ \
<!-- * N8 \6 m1 z/ E; J: {8 e
body { + W; Y3 @* B3 T
font-size: 12px;
! Q# ^3 ^9 N( @6 P' Z: Q# c5 ltext-align: center; " J6 b l- r# T$ X- L
margin: 0px;
5 v; s. T( x \, @# Q. Y, w. Jpadding: 0px; : z* a. t0 A! O- V
} 6 C0 J& \9 S& y- f. n0 C6 d
#pic{ 6 h. @5 \! p6 i" e' `! o1 x [. V
margin:0 auto; & d" a6 U% A( o# c- m7 h
width:800px;
1 ] B& C) b$ c8 |3 x# V0 a padding:0; / P. m6 U2 @9 H2 u
border:1px solid #333;
' q' q. E, Q# X5 a; W2 A }
% o: H, F9 n8 u& q#pic img{ 8 Q m* w7 S! x
max-width:780px;
, ]9 t* I/ _, m1 E0 b3 k8 pwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); - i7 q5 m% h+ i/ g. x' ], [. U
border:1px dashed #000; . V- B% C) W8 X; _% \7 D- N$ h
} 1 r% v- T7 J3 y
--> ) C: C$ t# Q( _8 a% ?* m7 L5 Y
</style>
5 ~. _ R# d$ H* S# _* ?</head>
- H" z9 K; b1 W, i0 g2 h8 _<body> & ^3 s$ U# }6 h0 g( E7 T: M5 E
<div id="pic">
+ ~4 X! S% v% @9 P<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 Q# G2 C. | P5 s( P+ v2 m</div> . \5 c' w; [" W# A8 k3 R/ ]
</body> ' w6 N$ h: x+ O/ ]$ P5 _) @
</html>
4 j) E8 h0 ^7 W: {7 `3 B3 O, K: R1 o
u6 V- A% g @. m百分比适应:
8 V( b0 v, g' q, k4 L: d以下是引用片段：
$ u* [" T! s6 d: D<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ A. p; Q7 Z6 X, [3 W" ?+ m5 C<html xmlns="http://www.w3.org/1999/xhtml";> 6 V) a, W$ Z4 p% h5 X) A; H
<head>
7 o4 Z7 s* s: N3 Z<meta http-equiv="Content-Type" c />
" a' a6 k2 V7 d4 d g4 l<title>css2.0 VS ie</title>
1 x% _4 I Y' H' T0 v$ I% f<style type="text/css"> 5 {' O/ N3 ?4 p5 F7 _
<!--
6 Q$ h+ {+ v" r5 lbody {
/ V% Y f/ p7 f# r5 }/ g2 M% K- Efont-size: 12px; 7 `# r8 {9 k" t; `* [+ Q x
text-align: center;
. ^2 G. r: }' H" e5 T2 v) @margin: 0px;
7 m# `- {! X" [. m0 T8 mpadding: 0px;
, K' \0 s- o) u) O9 i, d7 ]; b}
2 N, V1 j( l- J9 l# d#pic{ \9 [/ s# T1 t }2 m# W
margin:0 auto; : x% G) u6 z& A$ Z7 l
width:800px;
( J4 P0 o0 X' J& ]1 v$ N padding:0;
* q) r0 f) A0 g border:1px solid #333;
2 _4 [/ j3 t+ B6 R( ] } ; l1 }5 X* f5 |9 N. H( n9 U; U
#pic img{
2 F+ `; o0 f, X1 Y' J: P max-width:780px;
2 U% a$ {7 V' wwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) J7 i" a( V, g( t9 l- m% D4 b' cborder:1px dashed #000;
9 N) i9 Z9 v4 ^" K1 r( }/ S, m}
/ k" O) S: c7 I' \, ~--> " `0 L3 k9 @" R8 Q0 H
</style>
3 d) q g, y3 v9 k9 ?</head> \# n, o9 v/ q" i- c
<body>
$ Z4 K+ b6 Q" k0 V3 }<div id="pic"> - Q/ b- ?- d \
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 h5 a8 z( N# H* D% w: ^3 @- E</div>
! r& S. Q/ @6 f" e/ J8 u</body> % t [4 p+ _# P% \- h" G1 s
</html> |
|
发表于 2007-12-8 14:55
| 