|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 `3 ]6 T% k, l4 S4 y0 ^. D$ X
关键在于：max-width:780px;以及下面那行。
6 `/ A0 L1 }4 A# z* W5 _% q$ Y$ Y% `固定像素适应:
) \* t3 v, d: I% ~: l; c" m) b6 X6 u$ l$ {! x4 s) {
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> 以下是引用片段：
7 r& k1 E( M5 H9 Z9 `% B<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
k' z$ |' N3 b; W; U/ D<html xmlns="http://www.w3.org/1999/xhtml";>
2 }+ w# {, w0 J# l+ t2 K# t<head>
: ^( f, V* L; Z9 N' W<meta http-equiv="Content-Type" c />
4 }8 i& t1 w# @<title>css2.0 VS ie</title>
7 Z( {4 C5 B- L K) `<style type="text/css">
4 n# j" ?# p' J7 z. D/ l<!--
$ @' K& g) f4 _# ]% t! Vbody { }7 _9 L: B: K3 H
font-size: 12px;
0 R3 M2 @6 R/ Ntext-align: center;
' V- R: D. a6 U" R8 F6 G. s7 Zmargin: 0px; % y( C2 i1 B# a% o
padding: 0px;
8 v) k# }6 M/ ^( L- _3 b1 D! A# O} . v7 o; R; J2 N9 U g: `4 @: i3 [
#pic{
% J0 V1 h7 r9 q3 E4 o8 k( t margin:0 auto; / R3 W0 l; P/ z; h2 l, h& N
width:800px; 8 C, g' R2 |- {; d- i4 e! {
padding:0;
: {; X' ]) n* P9 P' { border:1px solid #333; - F, e0 s% D7 U. o6 \8 J* `+ l
}
( s3 t8 u" W, x7 o#pic img{
0 O! Q( z7 z& w- N' e max-width:780px;
3 T3 y% y/ ]& D' ^width:expression(document.body.clientWidth > 780? "780px": "auto" );
l; F8 ^% |. O2 a [, j/ r' j. y2 cborder:1px dashed #000; ( k/ L% G8 s' z: [% r2 V
}
- R( S& Q; q, B--> % b J: [' F* P! r: b5 O6 P3 m9 `$ r
</style> 1 Q6 z% D6 _7 m3 ~1 `
</head>
( b) z5 P/ t y/ `! z1 L<body> 2 d( L0 s! E% T5 Y
<div id="pic"> . Y/ T0 U% R$ Z( A% l
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 J/ f1 p. W9 l2 A, \
</div>
9 B+ T& Q3 k: @</body>
" v9 x% T4 p |. v/ F</html>
5 a* D2 \7 Q; L3 }9 _2 u* v. o2 V' O; _9 @3 c% O
百分比适应:4 g- K1 I7 h+ R% y9 Q2 I
以下是引用片段：
, Z3 A# Y3 z& C- n( m& u<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 {+ i' N g# o2 z: ], A<html xmlns="http://www.w3.org/1999/xhtml";> % v! Y4 j- L8 ?
<head>
5 j! y7 I) T: P* B8 J% _( r<meta http-equiv="Content-Type" c /> $ Z7 N8 F7 a! Y1 J- x0 r
<title>css2.0 VS ie</title> . F! n* Z. f& g- c: F! e
<style type="text/css">
6 {0 T4 B1 O/ m2 Z6 t# a$ e# h<!--
9 o$ q* C- j: k/ |9 e7 A' D [- Fbody {
& ^4 l& X, J/ [9 W1 Z @5 ]) kfont-size: 12px; 7 T$ y& t- l4 M( W& [4 }
text-align: center;
* d7 I9 p& f( |) X! mmargin: 0px;
1 w, N" a( A$ j3 W8 v$ _padding: 0px; - w2 M4 J/ ^; k# m# ~3 ?
}
, H! ?5 R: J. P6 v#pic{ 1 v- u! N& i1 x5 G3 `' L, w
margin:0 auto;
' x3 u) G# ~4 W* k+ M0 D6 I7 b width:800px;
5 J5 v5 D' `; E: x padding:0;
5 q( j8 K9 I" w0 g, ^ border:1px solid #333; 5 _( C; \+ r6 B
} : M# z" L* R5 |# m
#pic img{
0 X% r7 @( G* z1 t max-width:780px; 7 x2 z8 I! N6 X, Q0 H$ U
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ Y5 z' ? S4 |% d9 a8 |4 wborder:1px dashed #000; & V5 R5 I( a% z' q% r
}
# {7 |: n/ ?! ^. I+ m7 X. ^--> ; i/ V/ W( M! U$ q' v' V
</style>
; G) [( z2 C( I5 B</head> 0 W$ d% Z! g/ W3 z: g+ U; R# w
<body> ( e* u, \% U. V
<div id="pic"> - s+ M1 J$ H+ V p
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 I0 D1 z3 H B; B# [7 P/ |0 u8 P2 q
</div> $ ` a" T+ v ?& q' u
</body> - [8 k! ]- N! f" |
</html> |
|
发表于 2007-12-8 14:55
| 