|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
# Z4 n/ O* r8 L* _' I关键在于：max-width:780px;以及下面那行。
_1 g) o' G. l固定像素适应:
* N% p* P4 h5 s, {
& S- R* U2 h+ d+ O2 Rdotted; 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> 以下是引用片段：
; M0 ?4 x& m) ~5 E<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. f6 y( R" M! X9 H/ J: T, |2 U<html xmlns="http://www.w3.org/1999/xhtml";> ' i2 h3 M/ G0 x8 X6 f5 P$ D; h
<head> 1 H* N( A' [8 l! _3 C6 ?/ ]
<meta http-equiv="Content-Type" c /> & H1 p& c8 z" K" o. F
<title>css2.0 VS ie</title>
3 W6 i& l, o, d7 y<style type="text/css">
! \$ D. O, K2 t! t<!--
* x% U$ P, u' l7 ^' Cbody {
5 ~ q! |8 S" M6 efont-size: 12px; 3 b( A7 u2 x& e& H- e5 M8 t
text-align: center; $ N. P5 `4 L' L) x+ H
margin: 0px;
- o) T. ^, {6 Y3 x. F9 l0 tpadding: 0px;
! {2 m3 @" w. j N} " X# z1 [ c. ?% `7 T/ O
#pic{ & n; r* f0 k, F3 N m
margin:0 auto; $ x4 j# X1 }" r y6 N( f! Y5 R
width:800px;
* X' a4 Q9 C8 p+ B- q5 h) q6 W/ G padding:0; . P% ~" h9 g' w/ i% j, r
border:1px solid #333;
/ K8 ^5 g" F9 p. j } 2 ?! c0 }& E" C+ t, {$ c7 n3 I
#pic img{
0 I, j Q& M' a, f/ T; v. q max-width:780px;
) L3 J8 y7 l) }( \width:expression(document.body.clientWidth > 780? "780px": "auto" ); ) F, r0 b0 Q& c- q: `) O- T
border:1px dashed #000; 4 _& A) u V) ^2 G `: a: w
} , Y" Z S4 y! _
--> 7 h+ O& E/ C+ A" m9 _) R7 U) s/ G9 s
</style> - f+ }3 B( J# }. G
</head> & V. N+ C$ }% _. x' E1 n7 A/ U
<body>
; ]5 n2 ^+ O+ |: H: t2 p ]<div id="pic">
* F! z4 P9 D. e, M<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 M/ Z* j5 I! ?( y1 Z7 U
</div>
/ d K' X+ R" |. E( S</body> 3 `& A0 ?% i( j3 N K" i
</html> , g8 e% v4 ~/ F' g, D- k0 |
" n! _0 a m# I3 U/ Y! U7 [% Z' h" a
百分比适应:) }% J+ B4 `, C
以下是引用片段：
3 {5 T4 g( x, Q2 [: H) I7 `: X<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 n* O% ?+ F& D* T# C' a<html xmlns="http://www.w3.org/1999/xhtml";> , L( R3 d! M3 P2 e
<head>
! S6 p: ?; O- c2 k9 w<meta http-equiv="Content-Type" c />
% |( g3 F6 I9 M0 T1 u<title>css2.0 VS ie</title> ' F m' I' t8 J5 C ?" x1 k
<style type="text/css">
0 D0 x/ N$ E: ^6 a8 t" _3 \<!--
: N1 U) d% J, l, @. J: Gbody {
! n9 m* @4 {) Xfont-size: 12px; ! f4 U: o/ D& w; ^2 T
text-align: center; , }8 j7 v: R" a) `6 E \) o
margin: 0px;
0 w, } Y5 [% Q$ O6 B& G( mpadding: 0px; ' a1 x$ W9 l3 S0 }: y3 {
} / }& o- |; K7 ~' d
#pic{ : D5 \( U. m% r, K6 k v7 A
margin:0 auto;
: ]# D" Z4 p6 ?2 |6 s7 L7 s width:800px; 8 F' w4 p. e* \; ~- l G
padding:0;
3 D8 {9 v2 n5 f3 ?' _) l border:1px solid #333;
- {8 g V x r }
* f+ A; a3 B% [0 R5 P4 s8 W#pic img{
* M0 b1 {1 z+ N6 N' Q: }& Z max-width:780px;
0 E9 B4 p, {1 Y1 ~% D8 mwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 9 `/ a6 v) a; M
border:1px dashed #000; , o, X; [0 i! i0 \8 \
} , ]: z) l: f1 _( M5 x
--> . P0 z9 [/ J/ E$ g
</style> " }6 a: n: E) ]1 ^% ]! u
</head>
. N( A6 ]0 b; ?+ f7 L7 l7 b8 r<body> + g o) g9 ?$ l/ U* G2 s7 {6 f
<div id="pic"> 5 G* s5 G; I9 o B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + j, f2 j% x3 C# l& H0 ~: I2 K
</div> L# L- M6 |1 ~* \; Y
</body> 3 b" U. g+ m& d! d5 E- {
</html> |
|
发表于 2007-12-8 14:55
| 