|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14161
- 金币
- 2371
- 威望
- 1647
- 贡献
- 1319
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 _4 Z! C k4 ~关键在于：max-width:780px;以及下面那行。0 ?- q, W: B. s4 n+ g3 y. A
固定像素适应:
9 x+ k: b# O$ p7 I7 K* U/ {7 }) r
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> 以下是引用片段：3 ?9 L& B7 B1 K6 ? e7 Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + @0 i8 d& |) P6 T% p, P% ^5 l
<html xmlns="http://www.w3.org/1999/xhtml";> 4 Z7 G6 i# b" ]6 S
<head> ( X" |; U6 B& A* ?& H# o1 f
<meta http-equiv="Content-Type" c />
8 Q& S' d* H+ p' Z<title>css2.0 VS ie</title>
5 b( s, o! o2 Y, B" l, u<style type="text/css"> & ]: C2 h: H6 ?# q0 T
<!--
# S. J8 C& \9 Z+ ibody {
3 D c/ }" c K! t' V3 L8 c. cfont-size: 12px;
) p/ T8 V( ^4 `7 W9 b% s0 N+ htext-align: center; . A0 E t, R$ a4 @8 A: F
margin: 0px; / j" f6 p7 ~3 O! i8 u6 f; |: T
padding: 0px; " B5 J Z' E! @- r7 O& e% k# \
} % m6 F0 Y$ f, z; V2 \: k$ U% I
#pic{ . s Z, l$ q8 ]0 U* ?! n
margin:0 auto; 2 |9 Q* |+ B. }. J
width:800px; . t {0 U. L6 x4 O# v8 w' J
padding:0; + I9 \# \) A1 ]" F
border:1px solid #333; : ]' L1 H( H$ x/ M5 R
}
4 I+ Y' ~8 O: u' T' {7 w8 `#pic img{
6 Z1 R, ?6 u/ P* `+ t& F( g max-width:780px; 5 v4 X8 @4 i9 S: d
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 J4 m6 b: k' sborder:1px dashed #000; 3 ?* f" ^) ?& ^4 G
}
. z5 D% g# N, z6 D* e3 W+ o2 C--> : D; ~2 N8 p1 m% V/ E
</style>
( V* ]) n+ A+ \/ g( K0 d* s/ k ^: F/ H</head> ' m- i! z c2 A
<body>
. } j( X2 K' d: P6 z<div id="pic"> . ]8 b6 E$ l8 \
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 t# o2 t6 K, Y/ ]& x% U4 Q
</div>
+ n. ~; |( Z6 V: {3 Q; n- X1 J</body>
; \7 ]5 S; @! h7 m$ g$ }. s</html>
7 [; N6 f2 l# k# W, ~. e! j
. s) \' h( z* Y- S百分比适应:
1 b9 O; p! T/ [/ ?: `/ o; n以下是引用片段：) N9 T5 w4 D, _, w$ b/ m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ b- M5 z p& b6 n8 A& Z<html xmlns="http://www.w3.org/1999/xhtml";> - |7 W- H$ H6 g
<head> ' L! S% r! Q6 }( {4 ?
<meta http-equiv="Content-Type" c /> ; P1 E# c' W& Q# Z( W) [3 p
<title>css2.0 VS ie</title>
- |3 \, I6 \. }1 |. z) f<style type="text/css">
: L1 x! b& t+ K" `% G<!--
+ m: z- ]) H& Z/ p' O* Gbody {
9 b. M7 e: c' T9 Tfont-size: 12px; , Y2 c4 e) F% z* q
text-align: center;
% b! q- X* Q5 _1 t# vmargin: 0px;
1 J1 @- z# C3 l6 p' k4 Zpadding: 0px;
0 C! ?# l( t& n} 4 I7 S0 G2 j( V& }# v
#pic{ 1 n$ j9 C! u: ^! e. o/ I/ w
margin:0 auto;
- s% }- C, N1 v1 \/ h! k* [ width:800px;
# U; z0 [& m1 Z E+ j- U, `% E, {. ? padding:0;
4 ~6 j# l# G3 u: y border:1px solid #333; 6 y& X* o i& @+ N5 X @# G3 a
} $ v+ Z1 ^ w R7 J. X( X5 D
#pic img{
- E1 E4 \* E; U) z2 Y) F4 v! k max-width:780px; " }. m. ~% u, Q+ Z n) ~: }$ w
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% W4 G; F5 F- V1 k: T# N: Gborder:1px dashed #000; - m5 ~0 T+ T/ L* c, l
} ' L* \ c; P& X, V* b3 _6 O
--> ) K* Z. s$ G7 ]; W) K8 [
</style> ' a1 g* [! b7 H, ~5 [
</head>
$ v$ k( ^, _1 H) J<body> ( a# o" A7 S1 l" P
<div id="pic">
: w( e5 d2 ^8 i<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + W2 @4 m- m0 [# c$ i+ i1 b$ c
</div>
; t+ w# @: N0 Y9 w' L3 {</body>
, |. b* ]1 T. z$ V9 C# R0 w</html> |
|
发表于 2007-12-8 14:55
| 