|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14417
- 金币
- 2494
- 威望
- 1647
- 贡献
- 1442
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! `* ~# d ]2 T! @, g; G- W+ j
关键在于：max-width:780px;以及下面那行。3 \# _' O; I0 \/ [& Z# f
固定像素适应:9 r3 C2 t1 R. j6 N7 H& u
8 U; u2 C* ]; x' qdotted; 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> 以下是引用片段：
" E# O0 W( r1 C/ I3 P4 M0 f( C) X<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " L7 t2 L5 W' a% X) I8 F+ k
<html xmlns="http://www.w3.org/1999/xhtml";>
7 ^; R# \ X" m9 s& w% x<head> 1 p+ X; d* ?! i" m5 M% k! [
<meta http-equiv="Content-Type" c />
8 B* W5 n8 G* j3 L6 Z$ r) X r<title>css2.0 VS ie</title>
# R' x' q" o+ G: V<style type="text/css"> : ?3 |3 ]" C: Z: D' J) h
<!--
3 N' Q; u! |$ R2 _body {
* E2 ^$ c! T( K( Gfont-size: 12px; : D$ K* ^! \' g* @& T
text-align: center;
( `# h& x% n: y9 Zmargin: 0px;
9 i& \5 M8 X& apadding: 0px;
' J3 l& j# t& d0 v}
1 C3 ]6 P( s' x' l8 c( _9 T2 R#pic{ 1 ]" R* g/ C3 a( b7 `
margin:0 auto;
& _! h! n* S9 n: a; b2 F" J4 R" I/ { width:800px;
! t+ k4 R+ F7 `- A2 y; I padding:0;
4 Y" m3 j4 k% j# e8 | border:1px solid #333; ' N! ]! C4 K# E9 t* O4 d4 J
} % I# L8 @: p: p! u. {& E
#pic img{
/ N, i( } J- l+ S! c- v) k5 c# R max-width:780px;
3 o3 Z' | R' B1 \) G9 ywidth:expression(document.body.clientWidth > 780? "780px": "auto" );
2 D) q5 s" Y- `, }4 t' u" o+ V$ E) Cborder:1px dashed #000; D* P2 Z0 s* E( ]$ B' H
} : z: @) r8 s5 M5 j4 x: q9 |. J; G
--> & u5 O' x& \1 |, C4 m) `
</style>
% n6 j( l9 t* O% @" n6 I</head>
5 {0 _& e2 f8 ~8 c: J6 @<body> ! h4 R9 W6 A/ P# P2 A, M
<div id="pic">
2 m# a1 k: K& ~4 e0 |0 f: y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( y$ f9 L: V, j! U& b& U</div>
& U: D" Q* [+ B# b' L</body>
5 _* J+ C# n3 s7 b</html>
2 `- T6 n- ?1 L/ {' D/ \2 F6 I# d0 ?) D d" H* A( H
百分比适应:& x8 h9 v# W2 [' g3 W" \' G
以下是引用片段：: v* h( N* {% W5 d a* Z3 d& A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 {' D% K& d, e, u4 ^) Z# {
<html xmlns="http://www.w3.org/1999/xhtml";> 1 r) q8 V/ r3 U W, \. g1 _
<head>
e' [( R6 Y _2 n( u<meta http-equiv="Content-Type" c /> 3 A; K- l+ }- ^* @- R5 I
<title>css2.0 VS ie</title>
# F, p) N! \8 a/ ~<style type="text/css">
4 p2 G$ [# {0 ~4 d<!-- 6 Z8 x5 L: T9 c5 S1 X
body { 4 Y& u7 B! E7 \$ s7 x6 |! A2 f: c
font-size: 12px;
9 E# W; A! z3 S1 {* M& Btext-align: center;
( P+ ?" z! q g# h) P3 X. t, ~margin: 0px; ' }0 Y" U5 }/ Q4 x9 Q" ^
padding: 0px; ) Q- r6 _/ n! ^! k
}
' A$ m2 E! d {! z#pic{ " y% E3 C. ?3 y0 R8 ~
margin:0 auto; / j2 J+ n' M& Z& i- b% @! j4 m
width:800px; 5 O& ^- E+ C% X7 q
padding:0; 1 s7 c: P# Y% n# L: O3 E
border:1px solid #333; $ k# |* _; ^! x* o; L0 `
} 7 r! e; A2 R: p( p4 q
#pic img{
& ^/ e" _% D7 u- O! D9 s max-width:780px;
; q* y, I* i( L! H8 fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); $ a7 [: y+ |, P% `2 D" U
border:1px dashed #000; + g# I9 q, M5 n! C/ Z
} $ d1 f! f! j+ S1 I+ O
--> $ t5 ]4 z* g8 ]6 T- c% P
</style> 0 p# K- Z) i' n9 T+ c
</head>
, Q2 q- `; }; o$ }# |/ G<body>
: l7 L1 t7 {% L" u<div id="pic">
- E# d; n- l+ I* V+ [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # N: L2 b* E ^+ O u+ b3 ]
</div> 9 D: T' \4 r- g
</body> ( E2 d# m1 Y4 N
</html> |
|
发表于 2007-12-8 14:55
| 