|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14331
- 金币
- 2451
- 威望
- 1647
- 贡献
- 1399
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。) U U+ a# _0 h
关键在于：max-width:780px;以及下面那行。7 u, G( @; I6 P2 v6 J; l8 J
固定像素适应:8 t" G' z; M! p1 h
5 J4 J% B [8 [6 u5 ~
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> 以下是引用片段：4 v6 [' ?& q. W/ Q5 d9 W3 L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# B0 j) B7 G& f<html xmlns="http://www.w3.org/1999/xhtml";>
+ N/ b; |" i4 [3 j2 _. H<head>
' t' C a% C `% F% T9 a1 U) v<meta http-equiv="Content-Type" c />
4 [+ P: _7 U7 n. _+ I5 F<title>css2.0 VS ie</title>
0 q6 o: F& E9 m1 J7 ?0 {: _<style type="text/css">
; P5 h/ p M& |1 G* D. n" g<!-- . i( X) d8 } x9 l" {. Z
body { " b: n0 a! q* h
font-size: 12px; $ @# u+ U3 Z4 {- ]0 G. s2 Z) p6 i& U
text-align: center; 4 @! N8 P' D2 x) B2 r
margin: 0px;
! L, I8 [9 C' _" |6 epadding: 0px;
3 q8 O4 K' j% w; ~/ f7 c9 s} : ?5 P' P; K) z
#pic{ # U# Y5 @+ z# P8 n: |$ O1 B' G
margin:0 auto; 3 `5 k" ]/ c2 ?
width:800px; & L0 Q, @1 e7 i% h% f: e7 N
padding:0; 5 B" }0 Q' v$ H! g! `
border:1px solid #333; + e6 p$ u: x6 u8 [; B$ M- b; n+ a f
} ( e' K) [) `" y# X! c
#pic img{
' M v% C8 v" e& |& p- a9 [ y max-width:780px;
( ^# W7 M7 }4 l e" E2 y! N7 y9 Vwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
, c M- ^; w8 G5 G: x t/ jborder:1px dashed #000; 9 s4 s6 \# ?7 O% E$ K0 L
}
* E* [0 m' B; @-->
! J$ `, D l" M. Z3 H</style> ; k: [, t# A R& L" C0 i- W
</head> 2 p; X; V0 Z% S$ e7 ~" p
<body> a6 g t2 Z6 }" M# o7 y( G, l
<div id="pic"> $ n7 E1 ^6 V+ \; b5 Q% h
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) b/ ?0 s' f, q4 o/ F7 A8 E4 [</div> : i+ w/ \7 `9 k6 S2 f. u
</body>
% B9 V+ e* r" w/ b2 N</html>
- B3 ]! e; D* d8 ^5 M9 J# x$ D8 N" }/ ~- L9 w; U
百分比适应:
2 _8 M& A& w3 `以下是引用片段：$ A6 ]) K( `* ~# i v0 R2 s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! E& P2 v+ L% `1 m6 B8 N( [
<html xmlns="http://www.w3.org/1999/xhtml";> % ~/ n: V. a" T5 a0 d
<head> 9 Z( x4 }* Z6 O* H) a" f; S. e3 a
<meta http-equiv="Content-Type" c /> ' g8 f; @( p. T" H* U
<title>css2.0 VS ie</title>
, k! Z5 H5 a6 z3 y: _4 G<style type="text/css"> * z8 x5 ^6 ~7 _
<!-- % Z* O C* Z' o9 C& J8 g/ C( i
body {
& {8 k5 a/ g L' mfont-size: 12px;
5 a0 d9 ~; r! e- Z0 V7 Ntext-align: center; d; f0 `+ x0 e+ L9 I) v% O
margin: 0px; $ M" l! C5 {- L# E1 F' n9 O' Z
padding: 0px;
1 A& Z; K; B$ u/ \% Q}
$ i9 I1 f/ F. `+ F/ d: l9 ^" t#pic{
/ [) ~% A+ I. G8 p8 G A4 ~ margin:0 auto; ) ?% e# P( X! N+ V' f2 j0 z1 @
width:800px;
% J# ^+ l" V# v# N% e padding:0; ; Q6 u- I) B1 p0 ~. q9 e, i; Y
border:1px solid #333;
+ z; {2 V, k, i8 ?3 x- f* M }
, m. n' X1 T) n' d0 l0 V+ O#pic img{
# T" j" ?' L9 ^1 ~9 Y$ f max-width:780px;
9 H# G3 l* v3 z1 ?; `width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
^+ \9 N4 @6 n+ @* o9 A$ nborder:1px dashed #000; 5 v! o& U/ V/ q8 p) i
} ' L" E$ {5 |4 Q+ f1 L" O
-->
. u# X7 s$ R& ]2 I6 w</style>
1 Q; a0 u% m& z4 x/ B+ b</head> . O8 V! x( c: w3 ~" q
<body> 0 T6 W# B) O( P' z0 g% x& U
<div id="pic"> % U; Q ~) k# f1 B; v. i* n
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; ^) E" F, |$ Q4 m! d
</div>
( @' r" X' b# W/ i</body> * o9 m' v& F f. Y9 i' k `
</html> |
|
发表于 2007-12-8 14:55
| 