|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14333
- 金币
- 2452
- 威望
- 1647
- 贡献
- 1400
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。. E0 ^4 q0 s8 e+ s2 C9 D8 W
关键在于：max-width:780px;以及下面那行。3 y a4 f; t+ Z3 n/ ^$ U! P
固定像素适应:1 T" o9 h, q0 r; \5 N
8 k6 c! i: K1 p! D
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> 以下是引用片段：
9 J" N" W* B4 x. J) `3 y2 W' q- k<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 K4 v/ `5 i2 R3 W2 T<html xmlns="http://www.w3.org/1999/xhtml";>
: P! t- u9 O0 Q7 r% Y) c" Y<head>
0 f, a. \$ m5 X8 E- `8 G- L<meta http-equiv="Content-Type" c />
% [/ _9 K! g. E! p" E<title>css2.0 VS ie</title>
+ d7 Q; a) s, n7 `* R- A5 {# m<style type="text/css"> ( h6 k& O3 \. m$ T s$ V
<!-- ?" L e: I1 Z( \" D [5 c2 t' }
body { , n9 X: n0 l% r7 k% w
font-size: 12px; - ^% ]- ^4 _+ I: a7 _4 i2 T) i& N
text-align: center; . S I+ `6 v! c) i; W9 c/ \
margin: 0px;
9 o9 y7 W. E( X0 d# ^& A& J1 hpadding: 0px; 3 A z; h) l% G: }0 p! A8 `
} - l' H, u: P" J+ r
#pic{ g. T# |/ Q+ K _! d3 b0 x
margin:0 auto;
! o# }/ g: S3 ?3 c3 g8 a width:800px;
& [1 D- u ]7 ^, p padding:0;
: E1 \$ c- E% j- h7 ] border:1px solid #333;
: U' P. n& j k6 O+ f } 9 A/ G, R' N L0 g7 w- c' {
#pic img{
2 p0 K3 s* D$ L& R( H/ H max-width:780px; 4 E. B! |7 @& F: G+ U5 `$ S& X
width:expression(document.body.clientWidth > 780? "780px": "auto" );
5 E5 i. [4 w. lborder:1px dashed #000;
6 o7 t) z. y, i* b' l+ D8 s9 F6 _} * x8 v! A" \: M5 ^0 z: I. k
-->
, f+ W$ N5 @ c6 f</style>
+ z: m; A# }/ c, z& [; A" p; g2 y</head> + E4 m) n. z% b: k$ Y- J
<body>
5 P9 I1 L& S* F' x3 h<div id="pic"> ( \2 `- T/ c1 H( E w
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. f1 {; Q# q0 s/ ]( e</div>
6 Y# @8 ~ r! Q U8 f% x</body> : e0 H/ [2 N3 K3 s9 j; q0 n
</html> % y. G+ M4 _5 @
+ k( S& l' V( u- X4 X& l; c
百分比适应:# N+ e1 r0 n7 B+ P
以下是引用片段：
" ~( `1 ^; y( E, R( ~ Z% R- b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : M2 G# w3 |: F, {
<html xmlns="http://www.w3.org/1999/xhtml";>
. d$ N* R$ R$ I<head> 6 Q) V8 s: L) [$ X$ J. p: K
<meta http-equiv="Content-Type" c /> 4 p& h' ]$ { z' ?
<title>css2.0 VS ie</title>
; t5 G/ z3 r( q& l8 k<style type="text/css"> . w3 [ \( I R& G2 s; Q3 Z
<!--
. m% y% H# h7 Q) _# t8 lbody { 4 \1 a( z! S* z
font-size: 12px; - A7 \1 p0 M! ]
text-align: center; - p' _7 O/ b# p, H5 L. [
margin: 0px;
( M3 H) {) _: vpadding: 0px;
! k3 b& s3 L1 V- g3 X5 Q# c} ; q' q( B, k0 r" V" d/ N3 t# I
#pic{
1 I* }- Q3 U% v margin:0 auto;
1 s8 J* i8 ~- B- k1 A3 ?+ T width:800px;
# N3 N) K5 H+ F8 n' R padding:0; 1 z, [) e* S; G3 [3 W2 P
border:1px solid #333; : t( k! I6 d3 [
}
& S+ A/ h- g q# [1 W#pic img{ 6 { z2 f q( q1 q/ t/ p1 |) ?( f
max-width:780px; 3 g2 ], i$ }4 V N5 F0 j; Z" [
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) w( Y' _8 F( M! S2 k+ ~1 e6 gborder:1px dashed #000; 8 J: Z8 B1 W3 {. k- X* x3 I: C
}
+ J; @: V9 \: M! C- J-->
6 @- |" Q# f& u# Y0 G( C</style> / _1 F5 R: F- d+ q
</head>
) F1 Q3 S; Y9 |1 A% V) M2 M, K<body> : E j z( \6 e& I0 b' a/ h
<div id="pic"> ! _7 q6 a ?- Q* a
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> O7 R! A- d- N" b+ w$ R
</div>
/ C1 F3 q7 ]4 |, e1 o' a/ K</body>
& a7 _( n( i* Q \# a</html> |
|
发表于 2007-12-8 14:55
| 