|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14395
- 金币
- 2483
- 威望
- 1647
- 贡献
- 1431
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. r7 ^' l4 `3 Z |! z8 l关键在于：max-width:780px;以及下面那行。
5 f r6 L5 Z7 W+ k* @6 U/ C+ i固定像素适应:# d, X; ^: F6 L
8 f; k; u1 d0 V& K, d
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 ~' D; i% m) y/ A6 `1 U) U! _* A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" e4 U2 d% {3 \6 d* E<html xmlns="http://www.w3.org/1999/xhtml";> 2 q3 \* C- }) N" z B
<head>
& @$ n/ X, D2 t1 r" F<meta http-equiv="Content-Type" c />
+ v* p! ~5 j; P+ l! @# f& n<title>css2.0 VS ie</title>
3 a3 q# \. O* h7 r1 b<style type="text/css"> / S6 |# r- n# \1 B |/ B) |( ^
<!-- ' O* ^: g9 {5 O5 \3 u3 ?( u, C9 x
body {
5 U$ X2 i# M6 q' V6 Q# {font-size: 12px; 3 {& u- w9 P, A9 g# b& X4 e
text-align: center; & v2 N# D7 A& K
margin: 0px;
0 ?+ v# |) t. o4 G6 X/ e' h: vpadding: 0px;
, l$ h* `% E {- h} 6 s: D. j3 n. B
#pic{
" x1 W' F3 |+ i6 c+ ~" o; F0 J3 r margin:0 auto; 4 n+ ~- M( q- }9 H: c
width:800px; 1 w# N. l5 V2 H' `: z/ u+ Q [- N
padding:0; J) d& H- }: n* F# v. B, p9 D
border:1px solid #333;
& R$ z3 I# R% p. d } 7 ~( A5 [0 B: u. K: z0 e- Q! \
#pic img{ 8 G/ i0 @# [7 N* u
max-width:780px;
0 @' w) ]* P0 {; Q5 w9 N! lwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
" Z, u4 u% R2 }; l5 \, hborder:1px dashed #000; 5 T3 f' W& W- A% D. z; R. ~% v$ d6 ~6 ^, Z
}
; u" L, B3 R; ~# V; ~-->
9 i; l2 t6 S2 v" q/ e- A4 [* n</style>
' b! X- {8 B) u' ~2 V</head>
: a5 O. [( }5 Z<body>
. D& p( j0 _! c4 N/ ^$ N<div id="pic"> 0 B, \. _, y, `8 z0 w
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' V' V: t9 V) S1 ~/ A
</div>
# F6 G- Z( J: C# N7 ^</body>
! E$ Y6 A* g8 M2 h5 |; \& }</html> " x' {7 V9 T, m. L, w2 b
! t9 L, ?4 K, H; P( ?/ L6 O百分比适应:
* T* M* M3 c9 c, [4 g以下是引用片段：3 w! v. c' y# a+ }' x5 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 ]) z: o$ E% h) R! n: Q3 P1 v
<html xmlns="http://www.w3.org/1999/xhtml";>
3 M; q, C+ d1 E' p H6 k<head>
* I: I& u. O) z6 m! p) S3 M<meta http-equiv="Content-Type" c /> - ], o$ h7 ], P3 G0 N2 \7 ^
<title>css2.0 VS ie</title>
+ A( T1 l/ r5 I8 ^<style type="text/css"> " i4 j' l: c- M z
<!-- ) I' D0 f) n" A0 w
body { ; f1 R( w- _% l
font-size: 12px;
0 q: B0 g& [- ]& btext-align: center; - O2 l1 u+ W# P$ I: y
margin: 0px;
2 o# @$ O3 O' a( H. hpadding: 0px; 0 P' a6 U' M! O, K [0 [' w
} ) |* A8 ]8 c8 ~
#pic{ 7 J6 r6 w* C0 }3 c; P) R
margin:0 auto; 7 F0 V5 G0 f [- `
width:800px; 4 `1 Z( j8 m/ T0 i% |0 S# [
padding:0; & O3 _# E$ b( Y) f: G
border:1px solid #333; 1 R H9 Q) B$ v8 j( z5 F: \% u. f
} ) s: W0 | q; z2 C" \- a/ B
#pic img{
, J {: {* I/ W1 ^ ?3 p5 T- m' C6 I max-width:780px;
0 q3 {0 \- j5 wwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 f$ ~& l3 {9 o3 J1 V" n6 mborder:1px dashed #000;
; x( R/ a. N) G, C9 U}
6 J- k/ ^" c& E# Y# |1 a8 u--> + Y* `# ^& d) J' D7 _
</style> + X; x! N- r8 m h( B
</head>
0 m: V# {3 y* z3 h& x<body>
% P6 S e$ s2 Z% z7 c0 B<div id="pic">
8 l& O% x$ t6 w$ r5 |6 t8 F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 ?7 r9 ~& \ s6 U
</div>
% N* {" _8 n9 D% ~1 G</body>
& X; ]% x, ?- f7 u; E( ]1 M5 ^0 g</html> |
|
发表于 2007-12-8 14:55
| 