|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* N" H' C# X6 Y, R& n( z3 O2 ?关键在于：max-width:780px;以及下面那行。1 G: U# K1 s% H4 g8 D+ [
固定像素适应:6 Z- T- P5 s1 d& m
+ [0 S' f! _. R) r9 h8 g' o
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> 以下是引用片段：
' V( A2 t5 k @% c7 i6 _1 a$ ~% d<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) [& T, K6 X/ o+ t" ^0 y: N3 [
<html xmlns="http://www.w3.org/1999/xhtml";> 6 W, W9 s T& }9 ?2 T2 }
<head> " @& p4 A( s* S% r; r9 u! j
<meta http-equiv="Content-Type" c /> & q5 `7 I! v( N4 r" [8 z4 P
<title>css2.0 VS ie</title>
5 G4 I6 f+ D- ~0 M- @<style type="text/css">
9 U1 S1 a1 H: q0 q: y5 Y' P, G<!--
2 M+ S& b9 @( ibody { ! c9 ~. `1 Y6 K; b1 x0 t- s' x
font-size: 12px;
. T# h2 x7 @/ N: J9 wtext-align: center; 7 q9 O5 M( _3 k7 S
margin: 0px; ; m1 [3 B( b3 |. z R
padding: 0px; , w, k% Z; z7 D8 v
}
' w/ I" H, ?7 _% {: x S- J) J/ |#pic{
) i( V! m, D, U: d margin:0 auto;
5 k d& _/ `9 v5 A$ y$ a width:800px;
" O! X/ j4 e3 m( R# ~. D8 ? padding:0; 5 o% T }3 O2 h+ v
border:1px solid #333; 0 o1 I& U# @. G+ h, j
} % `1 g }0 H4 |, }
#pic img{ ) }6 \. [3 A* h& h5 }
max-width:780px;
- q6 m7 i G% h. ^+ J" Wwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
# R+ ~& t6 |: T, A2 [border:1px dashed #000;
( g8 q6 V- B( u. Y: @1 |}
# s* O7 m% _& s-->
1 u& c3 B) e4 x' N6 [</style>
/ L3 t' G- _) m6 D& M</head> ) w( S3 L) _1 V. K* S/ P4 ^
<body> - q2 B, x7 h9 X9 U+ N
<div id="pic"> % y6 n2 A8 ^& I5 ~- J) C! U" a
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 p F' ?/ z% ?9 O9 g9 d2 ^! }! g
</div>
4 M1 `* r5 B3 ` E' _</body>
; K; [! v$ c) C* X</html> & D$ j1 z! H4 Y$ @& t& @
8 V( c% t/ T% @百分比适应:
, p* @. b" T% K9 P# J: z9 |以下是引用片段：
- q+ x8 E. }; f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 w+ |! R8 \& d- |% b/ |0 t
<html xmlns="http://www.w3.org/1999/xhtml";> ( v" E* c0 ^2 L5 `
<head> , ~0 E, m, c( P' X
<meta http-equiv="Content-Type" c /> $ ~+ W& b& {4 B5 P2 J
<title>css2.0 VS ie</title>
9 L3 v; P) p. R4 U<style type="text/css">
3 `2 Q& e! y- X" G2 P- u* `<!--
( I5 h- O' G! j0 X. q/ b' W0 Ibody { ) Y5 S0 a6 d" \* @ S, d
font-size: 12px; 8 O! K/ U4 E/ B, A% ^2 q6 T. \* j
text-align: center;
1 w! _' O6 \3 G7 c1 _4 d' Dmargin: 0px; 9 N$ @- d. d8 }1 o# C# N- M; i
padding: 0px; ( C) {# T m ]8 T( B0 `0 R
} 6 K6 @7 {; B: D2 x* u
#pic{
* v! N" a3 N/ N9 i margin:0 auto;
3 n3 |! E2 j6 d$ B8 ?5 N width:800px;
. }! e/ m$ T- o. A7 I0 M padding:0;
E7 r. Z' D3 A+ w: [+ I6 Z border:1px solid #333; ( s/ G: V) r5 X" r
} ' M" q) P6 }5 f* U& D6 [0 G+ R
#pic img{ 1 @& u5 k# W4 q6 V! [7 q$ Z0 W) C
max-width:780px;
_& r0 k; [% }width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* f0 i" {0 L, {& j1 L; J" ~' Eborder:1px dashed #000;
& p) v) k. p6 l}
; I: E# ?& A+ ~0 d$ L! @--> ; I; i/ f7 B7 u7 k
</style> ' h' I. i1 c8 W# b4 s6 w
</head> ! v3 W4 X1 ^* _+ c8 {7 ^
<body>
. X& L) f: Y8 X1 X* C/ z4 w<div id="pic">
0 l7 u7 X7 g L# P- U6 z4 n<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) N0 x1 t7 y. Q: k. ^" v
</div> 2 B$ m: |8 o! n4 H4 P
</body>
) x) b6 {: d8 k. B8 Q' a1 q+ R</html> |
|
发表于 2007-12-8 14:55
| 