|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 i& H9 s# I% J
关键在于：max-width:780px;以及下面那行。
# P; K: v, {3 y. y固定像素适应:
- Z: {4 W8 @6 r$ c: V( h8 {" v! Z* j, ]+ ^! t
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 m! A! M' g/ z! E: M/ m' h; ^% l<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) J1 S) {2 V( H# L& c<html xmlns="http://www.w3.org/1999/xhtml";>
! c, o; U+ m8 A5 `+ S( E<head> ( n! g! w# i- K8 X* Z$ Y" E( v9 h
<meta http-equiv="Content-Type" c />
$ V1 i$ g. }7 c6 V<title>css2.0 VS ie</title>
. K& j8 `# E; \- P! {<style type="text/css">
0 K# K' m# N9 D6 D/ Y1 y6 ~8 h) m<!-- 8 n- p3 I0 l3 \4 Q4 A
body { ) z% Y8 ^$ F( M1 l }
font-size: 12px;
5 J! m& j) e7 Atext-align: center;
1 w- F: u* e! v5 g1 kmargin: 0px; 4 ?6 w$ a$ G; ?
padding: 0px; 1 c5 s+ ^, P2 q9 `6 v. l
} # w. G5 o* o$ O) E4 d9 {& v# c
#pic{ + G6 P) D6 N# N
margin:0 auto;
; R7 z3 u1 p4 E width:800px;
) \5 h" f7 E& M+ [3 B1 s padding:0;
# s( B/ t+ w" [ border:1px solid #333;
" i4 z" V) G9 P+ C) T } 6 e. i% ~- H, R
#pic img{
9 q8 r2 K2 S- }/ ~ max-width:780px; ' S) U( M0 A5 A7 }8 R
width:expression(document.body.clientWidth > 780? "780px": "auto" );
9 A8 b3 _0 m) _. P" dborder:1px dashed #000; + ]3 u/ `1 ^" }
}
5 V5 C& G L$ g. H# k" ?# P/ o--> + D% b7 a! ~% j% `2 i ?8 R9 V$ C
</style>
/ u) b, t( m+ N; h% O1 z</head>
9 K/ R$ ~% m5 T* ^% T) k1 j<body> ! z% F0 a: l0 b( r ?
<div id="pic">
, d- k/ y9 O0 G8 n( {<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 ], \( @: h2 n' ]</div> ; d( {( O# }" W/ {
</body> 1 M. f/ t" V. W/ O
</html>
2 S3 V _! t) O7 U
' D; ~4 A# y% b4 q百分比适应:' S; q4 _ O6 q% r8 |3 O
以下是引用片段：: X- a8 j, E& X: x; R) d" j2 g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) |$ J7 X( ]9 ~; A( t! m( ^
<html xmlns="http://www.w3.org/1999/xhtml";> 3 V6 Y& S3 s3 \
<head>
k8 b1 u9 f# v, ^( D% k2 {, i5 ?9 c# t<meta http-equiv="Content-Type" c />
/ R6 E6 [) Y1 W4 K<title>css2.0 VS ie</title> % n9 w5 ?, ?% S, l! a% W8 N
<style type="text/css">
4 Z* x" r/ W! C$ a; l<!--
- R" [1 ^" }) T( @! J$ X! Ybody {
X* ]0 L& ^' W- `( Pfont-size: 12px; + j5 h7 s Y8 p0 B/ Y) k5 |$ r
text-align: center; 8 y) o: `- [5 @, v; n
margin: 0px;
/ H7 A' H4 b* Apadding: 0px; % X2 n! F; h3 z+ Q
}
' H6 }% S& n8 \# g( D#pic{ ' b) y( n v+ G
margin:0 auto;
( o( \/ g7 \" b, P. t3 ` width:800px; 8 k: v3 K& G X' a3 h
padding:0;
% |3 f: B' F! H6 ?1 a border:1px solid #333; ; V- S6 k3 w, b) b
} 1 \, `0 M1 G/ J" j9 e
#pic img{ 3 q! z4 u0 S. [3 T) N
max-width:780px; + E3 Q& I$ T8 Y9 t' D0 ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ( |4 z6 [2 r, M" [3 z9 i
border:1px dashed #000; 1 E% y3 S) u1 d7 P. R
} 1 X: \9 n7 q- s& O
--> : C( f2 H- T. k' f! e4 p1 ]
</style> ; L$ U6 _3 J& I- b8 r' D1 H
</head>
1 H; W& T( ]. Q4 q<body> ( [2 Q! p' }7 N2 Z% @
<div id="pic">
. t3 |7 l' A& t$ j, E, T<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 l* u$ ^+ l0 s9 [+ V3 T
</div> ; d: U. ]8 D% Y" T- d
</body>
D8 }% k$ O9 K N" D% M! w</html> |
|
发表于 2007-12-8 14:55
| 