|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( ?" H' t, m h& M3 \5 j关键在于：max-width:780px;以及下面那行。' i! o+ w8 @5 y" Q4 i6 r& \
固定像素适应:
" _" p7 |7 d' e! _, r
5 j, \8 u0 ?1 v! i. E/ odotted; 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> 以下是引用片段：1 n$ \; J" R; ?5 g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / ?! H/ k; ~0 N: R+ M
<html xmlns="http://www.w3.org/1999/xhtml";> : z% z( N9 ~: K
<head>
8 h# C# `: {" J, Z9 u" Z1 r- \! _<meta http-equiv="Content-Type" c /> 7 T+ O0 e# {1 T/ }# F
<title>css2.0 VS ie</title>
1 J' m3 y7 \1 t* Q8 x6 q! ~<style type="text/css"> 3 f5 w5 D; c+ O* G, y+ o7 [/ s5 [
<!--
& r( x' R) H0 }, s/ l7 Z. @& _0 hbody {
7 f7 \- {2 g5 `* W. tfont-size: 12px;
+ ]; B1 x5 D) `text-align: center;
) I% X* J! S) N6 V' j7 Smargin: 0px;
5 _/ f+ u# T6 o$ |# apadding: 0px; 8 t: L* A1 B6 G/ X& n9 [
} ) y$ u* l( n! b& O% _/ W; L V/ O
#pic{
9 Z1 B2 R. b8 ~ margin:0 auto; , G6 ^) W/ b: {$ W, C
width:800px; 3 i! t( U4 ]' _7 r+ Q& D- n
padding:0;
$ S! e: K9 P- y+ Z: z border:1px solid #333;
* ~- Z" O3 G- o0 g2 @( T } 3 d7 ?( Z2 s, o5 {" N& {
#pic img{ _, N5 l+ ]1 q5 E; b7 {# v; A0 \7 j
max-width:780px; 3 D$ H! g9 Y. D/ A, Y/ X
width:expression(document.body.clientWidth > 780? "780px": "auto" ); , o. J$ R+ p% l& W
border:1px dashed #000; d3 B5 E9 K' U% d$ k
} 7 L T' L! [. ^6 N
--> 3 t' q1 x9 w9 i9 O
</style>
/ g2 l4 Y' Q: U" }0 X</head> . n' {( l. Q# Q. d7 T; O1 m
<body>
' C( x% r. D* f<div id="pic">
; w) N! Y# K. }) Q! D<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 j# r- k, j) O* r$ @: `6 X</div>
: L& t- `& D2 \1 m</body> / t+ i: Z; n- y w0 T" m
</html>
8 `* X$ J+ o( [0 v. ~
7 ]9 d; P) E' n: o2 w* r n百分比适应:
+ x7 F' n1 T! G6 a6 e6 r* Q+ ^以下是引用片段：
7 C9 c5 j4 L* D/ u2 \/ { F<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . a. ?- d5 P0 e, {3 S7 A( h- R" C2 w
<html xmlns="http://www.w3.org/1999/xhtml";> $ x3 `! T: U6 Y
<head>
S" `/ s7 E) C/ o! `& f<meta http-equiv="Content-Type" c />
/ F- C! j4 v* c% `) T. U1 K& W<title>css2.0 VS ie</title> & Q! a. `0 P5 u; X1 w; v; s
<style type="text/css"> ' ?+ N7 @! R& e# m3 i: ^
<!-- 1 c# g& P( B' L) i8 T
body {
; t- g6 N6 R6 |& W5 Y4 `. ]font-size: 12px; / y. J6 b5 |; g) O1 v- L1 ?- L" F
text-align: center;
4 v7 s: l; s7 P1 _# E) C# fmargin: 0px; / n7 S9 y2 J: a* j* c" F3 B
padding: 0px;
% R- e/ |/ E) {}
& V- K& S8 W/ i" \- x#pic{
5 \ L1 K0 _4 N$ x' w. ^- g6 l: Q: ] margin:0 auto;
% \% i" Z8 T5 E! c9 b1 g1 M: o width:800px; : f3 Y3 |) I7 J2 z, A- \* s# ?
padding:0;
3 ~& }% I* a! }+ r: q# A border:1px solid #333;
9 L5 }' f. I& } } 4 U4 x$ O1 d1 h1 O3 i
#pic img{ ; V' R& a9 ^' A
max-width:780px;
: E2 c7 ]6 c5 d/ ]* Rwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 M; ]- F% k4 b" V7 }% o3 e0 Q$ |border:1px dashed #000;
5 j. u2 z/ ]$ x+ k} + |8 l0 r+ B- ~/ M; J. \
--> " p9 C; i8 c1 F& a& H5 ]' Y. D. S6 m
</style> ( }; K, n* I2 W( X1 S+ |
</head> $ ?3 n9 ]& z* ?
<body>
w2 N `/ [/ p1 q( C. s/ A' K3 x0 M<div id="pic">
1 q* {4 ~ V' K% D6 o0 j<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& e( Z7 z/ c s) A- a; T</div> * m: D: g8 [; k5 A
</body>
. V' Y \9 N9 P</html> |
|
发表于 2007-12-8 14:55
| 