|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. Q9 ~- A4 e m3 ^关键在于：max-width:780px;以及下面那行。
; F7 ]$ B$ a; a固定像素适应:* Q# @, S* q# ~% L d! g( V4 o
4 o: b$ F5 m x! I$ ]" n2 c. c& ?
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> 以下是引用片段：
/ Z# [4 T H6 J4 m( E3 D; y9 D<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> o: y7 u' C" }. [! T( Q2 J
<html xmlns="http://www.w3.org/1999/xhtml";> 6 V8 B; \) {' o) o: G2 ~
<head> - ~7 B; [$ N' i* u: G' o0 A1 y5 W
<meta http-equiv="Content-Type" c /> 0 ? e' W0 F6 Y+ r! @3 m# X
<title>css2.0 VS ie</title>
* U, \ i- M3 r' u9 ]' t2 C<style type="text/css">
1 p; }! h) X9 E" V<!--
1 F2 v; B P& g; b: L. Abody {
3 d" b# V- |; xfont-size: 12px;
7 g" N4 a7 ~; D- D& s: V# s* Ntext-align: center;
6 V& Q( J6 Z$ B0 Amargin: 0px;
9 s& U* e& d- Npadding: 0px; ' Y c) a9 ^/ d0 ?/ j
} 5 T1 d& G2 c: y* T: U ]/ k9 F" Q
#pic{
: P4 P9 A- P! o, ]: K margin:0 auto; ( K0 C" d) W9 r: [' B
width:800px; # s! i( D) K- }. U8 s' `% X' K+ C) A
padding:0; : ^4 i7 K$ {* ?2 M& ~
border:1px solid #333; , Y, H% ^' q/ N b: C' A) \2 [
}
4 d# |. ]' f O% y+ I% w#pic img{ ~) o2 ^8 @" o( O9 n
max-width:780px; . |+ W3 e5 _. N+ ]+ Z
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 1 r- T- N& E3 v
border:1px dashed #000; ; y# ^! E- n: ?* i
} ' T9 ]: Y4 W5 w# I9 \
--> 0 s; c, v' A! ]1 N1 \
</style>
( V8 y ^4 w0 v( c. Z; {! I</head>
3 B, Y$ d! E, Z; w. a% b; l<body> 1 i f0 b, @7 _
<div id="pic"> 2 L; n+ ]6 M; \: z1 \
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + \- _6 b: Z" q8 g/ t
</div> . t$ m X; f/ Y: b7 N5 w6 z; s
</body> $ D* W# B; u' D
</html>
$ l9 ~/ m8 E+ I7 l6 u8 t& s1 g$ C7 ?0 r$ ~) T$ t( s: A g3 K! h; g
百分比适应:
! }( i4 d3 E9 v5 y' U# `$ Q+ m以下是引用片段：
9 z- ]$ O1 F- j- I: p6 e<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ F) p R# C1 R<html xmlns="http://www.w3.org/1999/xhtml";> w0 U: y) T; @4 @8 e: C
<head> ' m# V+ y+ d) F" }' y& ?. E! S1 x
<meta http-equiv="Content-Type" c />
3 W9 }' w' m( q& T<title>css2.0 VS ie</title>
9 X- J) V5 R- m# x, Z<style type="text/css">
5 c$ `$ W( N* O- K& Y<!-- / G3 o1 g! j' ` T6 B# {7 ^2 n
body { 2 s; x2 Y3 j6 j: Y0 P. T
font-size: 12px; . g3 h3 x3 S% h0 v, S! w* X! A
text-align: center;
2 K% N7 `4 f( P6 C& tmargin: 0px;
9 u! x- j5 A* L* j5 hpadding: 0px; 6 g& B1 H) g& I. n `: [
}
. ]1 ?1 G1 p) ~# P#pic{
5 j: F; R9 C0 j3 _* m( y margin:0 auto; 4 _ z8 Y+ s! s5 s* B
width:800px; , y' w7 X4 @6 d( P! z
padding:0;
6 h/ F9 X* F( ?4 E border:1px solid #333;
$ R. f* C: A% Y4 d d; ?1 d- s } 7 t5 E) u3 F; s2 r5 F6 {
#pic img{
! h! \! I+ A9 b" U- p4 D; A max-width:780px;
N2 o6 N9 f6 C9 T6 Vwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. K! b2 ~" K" C( O4 u8 m4 pborder:1px dashed #000; 2 c$ s/ Y- r3 }2 G0 R
}
* @6 Y5 ?' l$ ?-->
8 r" c. L7 a: y- P</style> / n$ p$ z: q7 |" }' Q' s
</head> ' r ~- @: d4 k y3 h+ _
<body> . r D) H$ W- h' Y( X$ Y5 Z& ?
<div id="pic">
/ l) r6 U" _& ^5 U5 b8 k9 l<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : q4 P6 G4 @5 q+ M) g. a- a
</div>
1 e* W" \3 i- f( L- x1 `</body> 9 o. X! q: w# v1 O1 @
</html> |
|
发表于 2007-12-8 14:55
| 