|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; A; ^+ G4 O9 U @+ Q2 Y) F* u: a关键在于：max-width:780px;以及下面那行。- j2 [7 x6 [3 p0 m% B. E
固定像素适应:/ q/ P, w+ g7 Y& z) H8 Y
: f; l |: Q i( p/ \. }' W
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> 以下是引用片段：
8 X) J; Y) i X' c0 ^4 u6 n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 W- ?2 F' A+ T/ n<html xmlns="http://www.w3.org/1999/xhtml";>
6 j5 Z8 K P" \& W( a, d5 ?' z& T<head> / K" [. i1 t) ]( l
<meta http-equiv="Content-Type" c /> # m8 C2 G. h& }4 d5 c
<title>css2.0 VS ie</title>
+ F9 J" g; U% P6 g<style type="text/css"> 1 P4 ~8 b0 R: U3 v$ ?" C
<!--
8 N E/ v; i) C2 j$ e# v6 \body { 5 c* {1 `6 ]/ I. ^3 H; f5 w, e
font-size: 12px; & D7 d, d& K! y/ b* m
text-align: center; 9 _$ i, Y- Q& {
margin: 0px; 5 y+ m0 l3 _" @( h: Q$ o6 `
padding: 0px; % o. j& t. J" C: i
}
7 D: W7 `- R/ ^" K6 f7 [/ h#pic{
5 K2 g/ u) j9 u, o margin:0 auto; 4 _4 F% Z- D f
width:800px; % M7 A* F) W, ]) w% r0 b
padding:0;
* A! F$ D3 t! ?' K& e border:1px solid #333; ! X6 n9 U1 i+ R2 L; e
} 6 T& i. A8 A7 M8 w3 W$ v4 J, d
#pic img{
. o( F# w+ O+ R5 u max-width:780px; 4 k6 k. l ?1 J# m; x- Y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
5 v! P; O& Z6 U6 D" Y9 mborder:1px dashed #000;
6 N ]' o5 m w: o) g# f}
* ^# j; T) R/ @$ u, [2 V( v--> # A% z: _% J; B9 F3 s# N+ N- n
</style>
" |5 Z- p/ |1 r( R; e2 ]( o9 @</head> y% D0 U! T( r3 B2 y
<body>
0 i% G @7 D: m- m& {<div id="pic"> / D7 D l5 s7 ]) N3 U3 f
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # i* t3 T3 k7 m3 U. e
</div>
! J2 B" D+ t) M# y2 t% T) r# @" ]</body>
& A5 N$ [) t$ Y" j3 I* l</html>
% ]6 Y( Q& K6 D! \) Y6 P. a: [" j! ?) Q" t% q" D. R
百分比适应: `. W$ W& G9 @5 ~* K
以下是引用片段：
+ H4 o/ w+ f2 S& P# y% r8 {; [& W<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% a2 r) q4 D" L+ F1 g<html xmlns="http://www.w3.org/1999/xhtml";>
9 I" d2 Q; X7 R' w/ s/ M<head>
: u2 Q. v5 _: O/ x; x<meta http-equiv="Content-Type" c /> 1 r: ?3 o* t6 ~' A
<title>css2.0 VS ie</title>
# g0 O! c. W& A3 q<style type="text/css">
1 m8 z" I. {5 A! j* o<!-- / v& F' p1 i2 B4 q
body { $ s% z# {) c7 f: j7 J
font-size: 12px; 1 h a' s. @3 K$ y! ~( v
text-align: center; ; j7 V P, |9 e% R( d
margin: 0px; - D* \4 E- U' y2 s3 h O
padding: 0px; $ N l; i) O$ }6 j
}
" w. e+ a- ]: }' P) E#pic{
, f# n/ D1 t8 k4 B1 ` margin:0 auto; ; |* d2 @/ u' V3 p, z( Q
width:800px;
' }6 Q- Q7 Q8 Q+ O) l0 _ padding:0;
9 n" G' w+ Y. ~% V: v3 _: @ border:1px solid #333; 8 w3 B" H- v: R B& H5 r. y
} 1 e6 e8 N0 ]: f: R0 e5 c0 @
#pic img{
3 g$ S7 z( h& D7 t1 M max-width:780px;
/ ~0 c' |. v/ w7 L5 p {* W2 Zwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" h8 F' Z& z# T1 F2 Vborder:1px dashed #000;
y, E2 g( T+ }2 s}
e5 v% e; n B8 ^: S ~-->
, _# U, C8 T$ Y. D# z% U</style> 0 B& c0 U6 K* n/ |/ c
</head> 4 H) W# ]1 }8 P
<body>
7 T% x1 M9 `" ^<div id="pic"> . n0 E6 d; C8 m9 a+ r( V. l
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! `+ b P/ \& |( z v8 t* t! S</div>
) O5 Y: }6 v7 H0 E8 M4 t3 A( Z</body>
3 i1 ~, A5 b* G% s. A</html> |
|
发表于 2007-12-8 14:55
| 