|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14361
- 金币
- 2466
- 威望
- 1647
- 贡献
- 1414
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! W8 y/ o( v$ c
关键在于：max-width:780px;以及下面那行。) _! j; g A) A @$ q* f B
固定像素适应:
8 i: s3 f E v3 L" g: o, j+ f# U9 P/ \! o+ [( \7 K4 S5 R: y. M( _
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> 以下是引用片段：) H* v7 ]9 W R: r3 Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
@: I! b1 k4 d k# I* f% A E<html xmlns="http://www.w3.org/1999/xhtml";>
7 ~9 I1 R8 D4 [; L1 u1 M) d<head> 7 d( L6 h5 h* {( ]: c5 d. E' H
<meta http-equiv="Content-Type" c /> $ h! {3 A) M$ I/ f
<title>css2.0 VS ie</title> , ?2 I% n& n) m3 r" S- k
<style type="text/css"> ' ?: J- H4 \4 l3 N9 b+ V* U6 U% o
<!--
6 j7 E# l$ `1 l3 K( ubody { . x) @* N$ V* o# W" u1 C9 d3 f* w) g2 y
font-size: 12px; , S7 w+ U& q2 ]; v) @
text-align: center; . U, D- E' ~! m4 f4 j5 y
margin: 0px;
3 X6 y5 F8 a) y' J- _' v" i& Spadding: 0px; * _ l6 @- S" s# r
}
6 E( u" R0 @. k#pic{ & v/ l7 ^7 g6 T" L6 `8 B
margin:0 auto; 2 `# m8 ` { |
width:800px; * b( m4 q Z; B4 ?) c! d; q
padding:0;
1 I5 N+ ?! [9 Y/ l9 Q5 _ border:1px solid #333; 2 w ]2 w$ q: R
}
7 c5 Y7 y3 W- t8 \. M#pic img{ # {8 s u2 \9 C0 d3 J) \
max-width:780px; , ^! J* @+ |$ l& W- @# E8 K6 N2 k
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& Q% c4 ]* q: lborder:1px dashed #000;
# Q) l) V b$ t5 r F. E/ d E}
w5 ~1 i) [4 Y-->
3 y% W1 W* Q* }0 u</style>
- E) Y7 R' k6 E</head>
8 H1 S; K: t4 a. Z2 E# t3 x) z<body>
' x( j! b. I5 ^! j" M0 y<div id="pic">
9 H; E8 e6 f# `( W6 D8 D& } k/ L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , k3 |2 N& L1 B+ d: m
</div> % B% K! y7 V( @0 }5 {. Z; g8 t
</body>
: V# F5 T* g2 m* A4 I</html> I- z$ E6 q$ @6 |- O
9 W8 }" [+ q5 _/ G' E/ A+ A百分比适应:
8 Q% m( a" j) s# M以下是引用片段：
" k( w l1 \) s4 b4 [7 y3 ~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. k3 G) |4 R: I" ^5 Y<html xmlns="http://www.w3.org/1999/xhtml";> 5 Y0 x: ]6 f0 Z# y6 x4 s, M
<head>
z2 y7 Y3 [' B0 E4 P<meta http-equiv="Content-Type" c />
8 [. X( t! j) D% P+ m& w<title>css2.0 VS ie</title> " N8 j) ^- [" S Z
<style type="text/css"> 1 w8 O* k5 O; b) E
<!--
) w2 c' b# C0 H _body { 3 E, n" i9 u: J
font-size: 12px;
- ?0 L3 d$ }3 p$ k( a& |- ]text-align: center; : @5 y9 z4 Q+ @- {9 w1 V1 G
margin: 0px;
! i& [4 Q$ l4 [+ Y/ v9 c* \padding: 0px;
1 [5 N8 }& O: r}
/ D1 |5 g' Q# r h' X#pic{ ' |; H/ e2 p5 X5 t3 H) m$ V# I% {; j
margin:0 auto; + c4 g" L! d6 F9 v
width:800px;
6 [' o+ O V0 @ padding:0;
3 d/ x- y/ \8 R border:1px solid #333;
! x- y% l' N1 ~ Z } # U! Q9 u2 B* \! q. {
#pic img{
5 r& D, @4 v# Q* I4 t. ^. b max-width:780px;
/ i9 C+ Y! u' `; X6 lwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 a; Y/ b1 @6 I
border:1px dashed #000; 4 x1 H& {3 P7 ^: k0 E" f
} 6 Q( W- x/ P& n3 d
-->
9 [: y' d3 E7 R( g0 O</style>
) x5 l; g' R; m</head> : [) @6 q; v( N. A
<body>
5 I& n0 n) [( q( E<div id="pic"> # ~+ ]+ l: g- k7 u y* M
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! E S3 c d! O0 i# A1 o9 F</div>
/ J' K" M L; I/ p</body> ! g# v+ P& N0 m0 m' i E. S
</html> |
|
发表于 2007-12-8 14:55
| 