|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14195
- 金币
- 2388
- 威望
- 1647
- 贡献
- 1336
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。& `2 m( v# ]- `/ T
关键在于：max-width:780px;以及下面那行。( s! Y) t2 h- V5 o) k+ x
固定像素适应:
* v* o0 L& r! P& f _$ n% w% J2 N
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> 以下是引用片段：
; v2 y0 Q$ M+ _<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 F* V, Q; E0 Y. i d0 l<html xmlns="http://www.w3.org/1999/xhtml";> % I! f- C# P6 |, ^1 `% m
<head>
+ c) S2 I- M0 @1 f# [& j<meta http-equiv="Content-Type" c />
4 o2 I7 P& a$ Y0 Y3 @<title>css2.0 VS ie</title> . U- K9 F# q* C, v! T3 c) h5 p( ^
<style type="text/css"> 2 E5 D+ d# S3 ~" q
<!--
3 @" w* \% C: K7 g1 T2 Dbody { ' K; m9 @' d8 \1 J. L' w
font-size: 12px; 3 x$ D! a: l/ j& j' { z0 q1 l
text-align: center; 1 B; j2 l3 j5 L1 |# q
margin: 0px; 4 P) g9 ^; w2 r( N# S
padding: 0px; ( r5 @, c7 |# f+ N
}
1 F* p4 x/ c- P# O#pic{ ! X9 g3 m% K2 j6 W3 ~" v/ ?
margin:0 auto;
4 i6 v- E; b; k* P7 D" z6 Y" W z width:800px;
- V# n* r0 N) G" h/ Q0 O3 } padding:0;
+ `7 F/ E9 C6 H" f$ z1 f border:1px solid #333; - \* I8 D6 S$ k' W* P
}
* @9 T: @' C1 E3 u# b9 L#pic img{
" J7 @ k7 X3 B$ A max-width:780px; 0 N! ~* S$ P& R. z: L6 G
width:expression(document.body.clientWidth > 780? "780px": "auto" );
8 R. \6 i( u: H, a Cborder:1px dashed #000;
9 ]3 L" p# w2 q- y' g2 v) U! z} ' Z1 M& l0 g9 `+ e8 {; _
-->
) n }* M' }% q# e8 |' {</style> Y9 @6 h4 f6 Y1 E. @ I
</head> ; T9 C) G, H v7 g
<body> / A0 w: k- W$ ?* A$ u
<div id="pic"> 2 m% V6 ], F- B# E, r
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 j: P2 I5 c% ]
</div>
3 e& a% k5 _/ {! F% s' a( G</body> / u) K9 P3 [. p6 k- s" }
</html> 6 G, c$ o- Z. o+ Z: b: |/ r+ E
( ?# d: u2 r! I. ~百分比适应:8 f: s* u) {' ]
以下是引用片段：
# F$ e% K6 B6 \7 G- C6 u# h$ }! u( a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 ?- g" P9 P4 A: l
<html xmlns="http://www.w3.org/1999/xhtml";> ! b- Q, ]& ^. e3 X" I- L
<head> 9 [2 e" B5 o Z" O) B/ h
<meta http-equiv="Content-Type" c /> 1 O1 n7 L# J! s2 b* _ v
<title>css2.0 VS ie</title> 3 }: n% E8 q0 U( N- b( R
<style type="text/css"> - |% f: C; q: G; D$ S5 R2 h9 e
<!-- 8 p2 k9 u6 ^: J
body {
" n* X6 F0 f# P+ L6 Zfont-size: 12px;
$ v+ {' [; v0 b% y" |text-align: center;
: U' |/ q8 U/ k0 n# V/ ]margin: 0px;
1 `( D- |3 m8 P5 v7 o5 l2 ^padding: 0px;
" C3 k$ N/ s' s( b}
% C! B, y v; [2 j#pic{
2 Q5 C0 \5 e. u' A margin:0 auto;
! |$ F2 ]; g4 _, _* o' D# {' [ width:800px; % w4 R6 {& V" V
padding:0;
5 k/ f% k4 |, J% y# M7 Y border:1px solid #333; & ~; R& ~& f1 Y
} 6 c# ~7 ]8 O! z% y q5 Q
#pic img{ 3 R/ l, Q+ g6 V: }* I' M
max-width:780px; $ [# R3 q; D: \1 M: |, Y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# [; I( l- D4 |* r. n) _5 _border:1px dashed #000; 0 e: L4 f- q, D1 F) W2 G
}
5 n- ?9 ~6 T; j+ }- z--> ( l9 Y1 E+ p5 N" C2 j
</style> , D- @( S' F0 A! g. L, h% d
</head> ! n9 ?- [/ ~: u, S5 F5 B( K
<body> # V3 q; e7 x$ T4 h" b
<div id="pic"> 9 D+ }) X; S, s2 a7 s; J5 w
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" S% J$ f) x5 l</div>
- P: [" K; E, A C' m$ d</body> # a. V9 b [, \- J
</html> |
|
发表于 2007-12-8 14:55
| 