|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14399
- 金币
- 2485
- 威望
- 1647
- 贡献
- 1433
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 C9 s$ w* ]7 x ]6 g% h关键在于：max-width:780px;以及下面那行。1 U" n! i* s- b( o7 j
固定像素适应:' L c- M5 [ x+ O( J: c! ~% p
- u7 V2 i1 D3 Z2 j5 d* hdotted; 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> 以下是引用片段：0 W. t- J; ?9 N" A- `8 `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) U% x" ~4 K# C+ F<html xmlns="http://www.w3.org/1999/xhtml";>
8 N3 \3 t) U1 U5 U5 ?. e- Y0 M& j) Y<head>
9 G: y( K2 x9 u<meta http-equiv="Content-Type" c />
3 }' V) G X+ O0 h1 ]<title>css2.0 VS ie</title> 1 q( P* E& r( u0 B4 a4 E2 I8 x
<style type="text/css"> 9 U; v6 L9 Q! h: d" K0 d5 h# K9 v D
<!--
/ j* R- z0 q0 F- Wbody {
* D" Y6 E- c$ q2 Wfont-size: 12px;
2 T. \9 i9 e7 Itext-align: center;
8 R3 D9 _3 K- {% D3 I5 vmargin: 0px; % }' y) y/ F+ k1 [
padding: 0px;
$ _' \0 W# a8 y2 K7 J8 J9 G$ j} # K2 P& v% q. C, e( V
#pic{
6 s0 Y. t' Z% s: q' e* ? margin:0 auto; ) P0 r# w h8 E+ T1 n7 ~( T
width:800px;
. q. J3 q9 x: s$ ?, [8 _ padding:0;
) V. N- n& o c2 U5 c! j9 X% D border:1px solid #333;
9 l* i8 _. @5 Q" s; ?$ I# q }
8 n$ V' A* _+ B. P/ F#pic img{ 5 u( J2 @9 U6 w+ V& l8 t
max-width:780px; / C H+ R" ~; R3 r3 m8 K Z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
9 E$ H) [8 V/ |border:1px dashed #000; + ?- n9 W- ^5 @2 E6 r& {
}
D0 w3 A5 m# T7 C--> ) K1 e" ^# p5 o7 r& n' x' S+ |9 p; x7 z
</style>
' X9 L( ^1 C: l</head>
$ g/ a$ m# U' y+ Y+ @# r<body>
- J* Z7 \, u/ b5 [! W3 z) z<div id="pic">
$ {+ \0 t2 N% W2 J2 v4 Y m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" f- A/ a9 s% R9 m" U+ w</div> & K! x& o ^; q9 P
</body> / R- p1 q, B- F+ N
</html>
1 R% L+ W' e) H: `& v+ Z! e8 ?7 ~4 T) _ T/ R: W; q, W H
百分比适应:
7 e% {# Y9 b6 L以下是引用片段：
) w4 j! X0 q) A8 `" T$ W9 L<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: {5 c9 X5 K3 [8 n2 n! U<html xmlns="http://www.w3.org/1999/xhtml";> + e5 D3 J7 q5 H: [( {
<head> , m* d0 o" g3 e4 s2 d/ P. [
<meta http-equiv="Content-Type" c /> ) x: O0 u4 l3 J+ e# \
<title>css2.0 VS ie</title> : j. t+ v+ o2 a
<style type="text/css"> 4 w, Q% k5 Q0 F2 h0 ?9 Z
<!-- 3 k W! n+ ?; z7 z! Q8 w, k7 }$ X
body {
3 c1 r' @8 U" d3 M2 afont-size: 12px;
- h( }! E$ p$ j( D/ F, M$ T8 g7 x1 ltext-align: center;
9 I' j8 b6 {/ T4 \margin: 0px; 3 v' ~5 y$ B& O9 s2 P2 @ a
padding: 0px;
# r. e% U) [; @$ V2 h} 3 S% i0 @. m) v. z d4 k
#pic{ ! }& ?, [: D% q! x) _! R2 H7 Q5 k" [# K- R
margin:0 auto; 7 g% Y/ ~5 T+ I0 Y$ N/ a! M
width:800px;
; I+ A" ]/ @3 m4 }8 H# { padding:0; / X8 O, b: {. |9 l$ u* X! K
border:1px solid #333;
2 p: d& I$ u+ _: {3 T8 s" w9 r }
$ u1 C2 L( q6 r. D+ U3 I# Z#pic img{ & u: P, O* g4 e' k) w9 |
max-width:780px; ' b8 p. C1 _+ x; s+ \# Z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' y% X7 V8 }; j- y' A3 hborder:1px dashed #000;
: |! k4 {% p- s}
& u+ T& {7 n0 [9 c-->
2 k. P& N( D" g! }9 g" W0 f* t" R1 H8 T</style> % K. V \0 j0 i- L5 L
</head> 8 _2 f5 N6 `* S
<body> & D1 n2 Y" f/ ^/ E. [
<div id="pic"> ) q; [7 ~& }. Z( F$ P* v9 u' e! P
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ ^: q7 E7 R" P</div> 6 z1 O9 T' Z. G
</body>
- C! w% L/ b+ W n. U, b</html> |
|
发表于 2007-12-8 14:55
| 