|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14369
- 金币
- 2470
- 威望
- 1647
- 贡献
- 1418
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ ]$ o1 h8 y1 _0 y- O关键在于：max-width:780px;以及下面那行。 |, W$ r( k2 ~, l3 ?3 }( z! |
固定像素适应:* d* }6 }. m3 M8 G! N* q% [6 e
6 k6 E" U3 ^1 U) vdotted; 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> 以下是引用片段：! w- _8 } @8 a5 X9 y/ c) {4 k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> f8 J4 H, Y- a4 n9 [& N( h/ c
<html xmlns="http://www.w3.org/1999/xhtml";> ! N- m/ J) G6 S
<head> 3 z; R/ u3 b, w9 i
<meta http-equiv="Content-Type" c /> 1 l/ Z. I* [; f: S3 k" \- s
<title>css2.0 VS ie</title> % x7 S8 L8 b( ~6 V# l* }
<style type="text/css">
- Y; n& A2 T: s8 B3 V+ C<!-- : N' a& F4 U( }( I. c
body { & x6 t4 A1 A0 i/ ^) B8 U
font-size: 12px; - z7 y/ `, j8 f& z( U$ x/ u" K
text-align: center;
& u" n# X! [7 V; d2 Rmargin: 0px;
: k/ ?2 V/ {! W* g* Ypadding: 0px; * t2 z( M" Z$ q6 s3 a+ c+ K
}
' p8 h, l& _& N#pic{ . w) y" s W! E" V/ T
margin:0 auto;
0 r+ G! N7 M+ e8 ` width:800px; ?: t& Y" M5 A, c' ]# l! ?( s
padding:0; - @6 l# a1 G+ ^9 `/ Z
border:1px solid #333;
) q( B& m: Q& B3 T }
( b3 {2 h ]" Z3 ?9 b) L6 Q3 A0 A, X#pic img{ / c x/ b5 Q$ b( \* `
max-width:780px;
6 @5 O0 e% @& e+ Qwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ( p7 ]* X5 l- T+ P3 _* J8 C5 t
border:1px dashed #000;
; K8 H) |& }" Q \+ _& m} 7 Y" y4 f- C: g4 }. |
-->
: q4 J, F5 p& I7 r. ?& D</style> , x' y( Y5 p. l ?
</head>
$ T" J8 C) U2 }* ?<body> ( p9 L) d8 ?# a# Z/ T2 f4 T5 ~
<div id="pic">
0 }: i- h v4 n# n$ \4 S$ x<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
k6 L& l! R* b4 H p8 g I7 k+ y1 w</div> 7 @0 a5 m: V- B, V$ F; H# w% J7 y6 ^
</body> c1 i. X0 _/ `8 M+ q
</html> 9 c3 ^ Z T. A* _
- r- I+ H# y6 q7 M3 _! Z$ k# d
百分比适应:
. \' c' `1 r3 Z9 U4 z以下是引用片段：- h, ~& p% ]; X1 i( X! O* {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 s' A5 |9 b" c; Z$ g<html xmlns="http://www.w3.org/1999/xhtml";>
4 k, D! @) |) h9 q S, ^7 P<head> * }# I( r, R: t, n4 H
<meta http-equiv="Content-Type" c />
d$ S$ b* S" T/ n' ?8 v<title>css2.0 VS ie</title>
# g5 \5 Q" s; W7 O; }; q<style type="text/css"> 4 P( P9 ?8 R4 I, e0 F
<!-- & t2 y. j/ u r7 f) T) I! r
body {
5 |) v9 V# t( r8 v& p& _font-size: 12px;
* i& c5 m5 U: Q9 G* Etext-align: center; + i0 M6 [6 v& K. e3 l
margin: 0px;
" M' X( Q- @# Q4 c- E9 q& Ipadding: 0px; ( Z9 h& w4 |9 I- A( ]
}
9 _9 S# l9 m+ d, Q% i! ]#pic{
% H: @. ^: K' I2 S0 v0 z( K( k5 g margin:0 auto;
% ~) O/ k! X C2 V+ m width:800px;
& }9 E2 {: d1 t1 M padding:0;
9 s" G/ k* b q" F# ^ border:1px solid #333; 6 l$ o0 ?; |# U8 N. Z2 n6 k4 k* l
}
6 a2 y* d6 C$ ?#pic img{ , m) G1 d' I! j9 [: [
max-width:780px;
5 E7 T- N% U, O" Jwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- G8 P% M7 B; G$ F4 dborder:1px dashed #000;
. s5 x. W/ H% w}
' {) q" }' |0 o9 h9 E9 W-->
% ?, ]% W) H$ e, Z+ D( n# b</style> ) _* _! G+ z6 A. P5 v
</head>
0 b9 c* N# f5 L2 E4 A4 k8 Z<body> # p) j; x9 \6 z$ c1 E
<div id="pic"> 9 w- {6 `+ Y) @( C& e k
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 x3 e b5 Z) m) j</div>
+ q% [6 I& G8 t8 B) R5 }</body>
" d4 k! k* p" O, Z* P: Y$ \</html> |
|
发表于 2007-12-8 14:55
| 