|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14339
- 金币
- 2455
- 威望
- 1647
- 贡献
- 1403
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 j) W5 A( S* \
关键在于：max-width:780px;以及下面那行。# o9 c4 B& T) i
固定像素适应:
. I- s8 r5 `; L. D3 i& `! _* G, v
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> 以下是引用片段：
( U% \; R# `& Z- _6 U { {<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# L( K4 S5 F3 ~: |1 K3 K( I<html xmlns="http://www.w3.org/1999/xhtml";> 8 E; `; \1 F) }* T
<head>
& I6 n) w% D: S! Z$ b2 q3 R$ H5 e<meta http-equiv="Content-Type" c />
) _* `' U$ e# `' _5 u' @7 V<title>css2.0 VS ie</title>
# @; u, v- ^* [& P/ o$ r<style type="text/css"> + U* v- G6 w/ b/ R+ q
<!-- 8 A- T% N( p6 R0 _& Q1 O5 `- ^$ z2 _
body { 3 }) R! j; }+ e2 l+ z1 r" @1 b
font-size: 12px; ! t# Q0 _7 A* x" L, Y5 c' ^. I
text-align: center; 1 v6 q6 P# F; w# X4 Q! ~7 K
margin: 0px;
! }9 v* S' k/ s) k% a# Lpadding: 0px; + @6 q% s6 g2 d; W* K7 _) r* L
}
* Q" v& U& e+ ?3 ^ s! a Q+ R ?#pic{
- X( g6 A% h( J, g$ v7 Q margin:0 auto;
8 I2 B" t- b* O! L. _7 Q width:800px; " h. p' u; x3 x: ]+ @# V) y
padding:0; 7 ~0 k4 b; [6 q7 A, K& O, n
border:1px solid #333; * }! w( u, Q! q
} $ @8 B0 h! C; u1 j& n F: z
#pic img{ ( {' l" E) I3 j& j6 b* T' Y
max-width:780px;
* ~0 I5 r" q$ S" R/ ?2 Awidth:expression(document.body.clientWidth > 780? "780px": "auto" );
0 E1 s5 s# o6 d6 M6 Bborder:1px dashed #000; - a$ Z3 j" F9 d3 D- R& E2 t% x
} 4 G, ?( K* Y# I: s2 v. g
--> 7 Q- C* j( _6 G) G: I5 W
</style> # ?( ]1 |) a; K$ }
</head> / h- B4 d& E3 w# l" z2 Z
<body> C' h* p( `; b0 S$ d" C5 p! B
<div id="pic">
" W* u' ]0 I3 g6 R) x<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 R9 ]1 a$ F2 _' }</div>
% v& z2 G! b& d0 ]+ y</body> 1 N% w0 @" {7 @0 \5 @' ^
</html> . b5 [/ q/ X+ u J# B4 ] |" J% @; p
. m+ [9 [! j: ^9 ~% G1 P. [, r百分比适应:
/ n) q, I. w4 c& @" g以下是引用片段：
/ n' U& i0 H8 \+ c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - K4 o6 b; V- v% H" U4 _
<html xmlns="http://www.w3.org/1999/xhtml";> # `6 ]& b& h9 S: X3 h/ f# B) {
<head>
! a. z+ B+ ~" W8 U<meta http-equiv="Content-Type" c /> # j' E3 G7 D& g* k$ r0 S
<title>css2.0 VS ie</title>
' O+ A! T2 ~ d0 f<style type="text/css">
! p9 s0 d6 }$ Y. d<!-- * L. E! K3 P8 r9 |" T) w
body {
! _. W4 W( g: t' o$ efont-size: 12px; 9 _$ o! L4 Z% H- F! S. m
text-align: center;
# r" }" t m3 J) omargin: 0px; : f3 h. k' |# ^$ A/ ? p
padding: 0px;
7 x' V: X; @( ~* b: e L2 W} / S) J; n$ M( f8 S# O
#pic{ 0 H/ I9 D6 |5 Y9 o$ [( v
margin:0 auto;
/ y3 F+ I" C/ j! f: o7 W width:800px;
; J% Y3 Q6 r9 o; P padding:0; 0 a* }) ?( R- l! J. k/ S$ @
border:1px solid #333; 7 e5 \* q4 A* g6 Y3 e# S/ J
}
& F6 T% ~6 _7 X7 u2 e#pic img{
6 U7 ]3 S- Y! ]0 H: M1 C2 g max-width:780px; ; |# j2 j* i$ B* d; D4 m. \" O' U& {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); . h2 d4 _+ o, {$ I
border:1px dashed #000; 5 h9 }5 h: ^, q6 B2 L" \
}
$ F. N" X, M* I. @, K# m--> 9 ]% `- _+ U C. K g
</style>
- k; c1 A. @7 k) O& q+ e0 G5 |; A</head> 8 P+ p2 D% b: k% p7 p. m
<body> 0 C9 L( B, q: S/ M P
<div id="pic">
2 d: p/ a# n2 ]: ^+ \( \2 J0 A<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ O- w/ G( m4 O+ A/ j/ B. ]
</div> 0 g) U. W$ H" J+ o: w7 d: [8 ~
</body>
4 D, e5 I. g' S. }1 j; Y: \</html> |
|
发表于 2007-12-8 14:55
| 