|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% A/ c: k: f' J
关键在于：max-width:780px;以及下面那行。8 q S9 ^; g" ^8 a
固定像素适应: |" c) A/ y, q7 S7 g! q
8 k1 g# V; U$ Y1 F; u% P, r V) 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> 以下是引用片段：+ |5 G% C" N2 G2 y5 `3 `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 B8 k$ O6 g% L$ b<html xmlns="http://www.w3.org/1999/xhtml";>
; c, V. ~1 T8 M1 S# Y* u: e<head>
$ N# ~- ^; T6 J* y* m$ v& ~<meta http-equiv="Content-Type" c /> 8 S9 Z. M! Z3 z' i4 H
<title>css2.0 VS ie</title>
+ j. e" Y* l& D) j! a: z( x9 @<style type="text/css">
& l' c& s# m: h7 [! x( v<!-- + O4 _8 I0 c9 h- |( n1 K) e
body {
. ?% E# `% t/ e; a; O% nfont-size: 12px; ' q; y/ u' F* J: z* |
text-align: center; ; o* ~" d; u8 {) ` {) H
margin: 0px;
+ ]3 x. W- x, p0 V, W2 M. F( Gpadding: 0px;
0 C1 t$ j4 W( d' V0 Z7 ?- W} ( c6 }9 W+ R) Z! @* E; r2 B; I2 v
#pic{
. z8 u" e% B( s+ v( ?( ` margin:0 auto; 5 @4 {5 w' A# t& u4 S# s
width:800px;
8 d# L6 t/ i% | padding:0;
5 \, M7 G- D' V& p+ ]" ?8 m6 I border:1px solid #333;
- j" J0 F/ E4 z3 }( `/ J; x9 r }
# @$ _" o1 Z* t3 u( P#pic img{ 9 [% M5 K' L' E7 E) P
max-width:780px;
4 v. N# ~4 l( u/ R# nwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 4 p0 k2 x7 t3 B9 H( ^. u
border:1px dashed #000;
& Q' j x- ^& T% q0 Y, ]& b7 G" r}
% i- X& K J2 \/ m) L6 s--> 2 ~8 r6 r3 h* P6 _* m
</style>
1 U4 S1 [1 V5 X# w0 n; q2 w</head> 6 E* q' h1 O% r2 M3 Q. J
<body> Y( J& J7 G2 r! v" S
<div id="pic"> ; b' x- K* F, Q4 t3 J+ [1 |
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % J+ t$ R( Z4 Z; d! p
</div>
+ W0 F, M1 }2 ]2 f6 Y2 c0 ?; c% b</body> , r2 T k2 a4 A6 H+ | {& y: x1 Q
</html> ) _* H7 H/ ]0 j+ [5 F( z
2 U$ o4 m/ S' Y+ {
百分比适应:- s/ V6 `9 M0 N3 ` d/ e8 o
以下是引用片段：
/ s$ ?, M! \* @' R2 e# _" c0 J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
|* H6 R3 f) n% Z2 L<html xmlns="http://www.w3.org/1999/xhtml";> . a* h* s t% K7 L# S4 b# z' G5 x' E% H
<head>
4 u8 [7 [% r- @2 F2 [2 G- a7 K<meta http-equiv="Content-Type" c /> ) y: F; ~# A) P3 H! x. e X1 \. W% d
<title>css2.0 VS ie</title> " x) n1 N1 j8 ]. A4 Q" N
<style type="text/css">
8 J, j% x1 f5 L% F& I2 o, a5 g<!--
* L- W G8 ~: K& O4 N: t% r9 n3 d# pbody {
7 h5 G! a3 u3 l- ]5 n2 p. [8 Bfont-size: 12px; ' U# |2 [' N# x
text-align: center;
% x1 j' o4 i* f: smargin: 0px; * S- J( K- g- O. A
padding: 0px;
* q5 E6 B: W2 A+ c} 8 [" B4 J4 n: t* f: k) S) q c( s
#pic{ 5 u) t& i& S, L0 \0 Y& d7 x# a# @
margin:0 auto; , X" K: v% r* w. o
width:800px;
0 Q, N: ]; A i8 x* |) j. { padding:0;
3 {4 D* F/ I. [" A( y; K9 [, ~ border:1px solid #333; 5 Z7 V& M8 L: T# a7 J- `
} ) E: j! z+ c2 F; }5 j7 i0 W5 E
#pic img{
4 f4 F5 n( v! y$ M/ S max-width:780px;
/ s! L/ v! Y0 gwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); $ y$ W/ g/ l7 X. Q: q
border:1px dashed #000; 9 ]3 s5 c( ~" v" Y" O: z- y
}
2 s" C. @, d% ]) _--> ( L: {. k- O+ b# e6 }
</style> 7 t7 U" d/ j0 f. r+ p8 e3 Y
</head>
# p, b# r6 ], ?. A<body> 5 l2 v8 V8 ]+ @$ [% g( m
<div id="pic"> + Y& o% Z" C: A2 d$ i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . D" T* ?) W, V$ R7 W2 Q# g9 _7 @* D
</div> . T% @" V6 K$ R+ `
</body> 8 L, S F; P6 w. B5 u1 K
</html> |
|
发表于 2007-12-8 14:55
| 