|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。7 h# E2 t# ^1 p' s! D0 b
关键在于：max-width:780px;以及下面那行。
0 v: }- m) T8 I8 E4 _7 Z. h6 V固定像素适应:
# S# b) a3 N$ N8 t% u9 z! d! [
7 |9 {5 c5 P6 Fdotted; 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> 以下是引用片段：
$ s; Y' `' R- T/ h' q+ T<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / c5 F" F+ w9 ^
<html xmlns="http://www.w3.org/1999/xhtml";>
; T8 f N6 K# L. @- x6 `' k<head> 0 e% s7 O# ^) l' W* r2 r' [" u3 S
<meta http-equiv="Content-Type" c /> ' g$ G; d2 Z& o4 h ]
<title>css2.0 VS ie</title> ! O/ n1 w; `2 ]
<style type="text/css">
" W/ A1 E2 f$ t( ^) _<!-- , D1 t( ?. x& Q) y+ x+ R+ @
body {
P& L5 j: [- n6 C& T/ s# ?$ Rfont-size: 12px;
. s2 d, U* ^5 b1 }text-align: center; 3 n% m; U' M& C# O
margin: 0px; # v& Y. m: K- }
padding: 0px;
$ t; C5 O' _. c9 c: A} * c# q! E0 h" h8 O8 r, O C
#pic{ $ y9 \" A- x5 d
margin:0 auto; , [3 S7 g5 E, d0 F4 x! a& N/ }
width:800px; 9 s* q: v6 ~& Y0 I
padding:0; ( C2 G7 D, ~, ^1 v! X
border:1px solid #333;
( @7 s+ `0 L/ ~) P( P' D* x }
% V" N2 V0 b" n/ b* u: A#pic img{
$ P% y8 H6 W% ~9 ?% W+ g$ {0 X4 o0 a max-width:780px;
; x u. i! y3 ?+ _# H/ E u. E- f: gwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
, M; L2 Y6 K7 S; h/ mborder:1px dashed #000;
3 {. s/ J+ S/ z1 w1 c- G+ V} 1 r6 S/ c3 O) T, y4 U
--> ( o9 K. w+ [; a' A' r2 @/ G" ]
</style>
1 f7 C$ E6 v& I3 n</head>
/ n6 C/ ]6 M* z$ Q2 \<body>
) p& n1 R: a0 d5 z2 t9 t7 ]7 K<div id="pic"> ( n+ W2 @2 i! _) Y5 U6 d4 m! T3 Q( S
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% N5 [% y- W# w" q) r `</div> 5 L, Y9 M1 X' P6 Q
</body>
- U+ p& {) U# K7 y</html>
: E; S- [% d: d) Z; U; ]
) D0 h# ~: Q( d6 X8 H百分比适应: a+ ] s; |' J) C. T
以下是引用片段：
3 D+ p1 M( v! a6 C: v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 e9 e4 K& G& ^( V: P
<html xmlns="http://www.w3.org/1999/xhtml";> 9 w2 [2 u/ G5 F& w! L
<head>
, m3 ]# O1 w8 z& L& E& m<meta http-equiv="Content-Type" c />
# k; Q/ l& [. j. L<title>css2.0 VS ie</title>
) R j8 C% _4 {( ~<style type="text/css">
1 |$ G- t$ }- r<!--
7 n; V- m$ T" V. |3 f. Ebody {
/ D# i' f ?% k7 rfont-size: 12px;
# `, Q3 {2 t! \7 m: j2 W% Ftext-align: center;
! d9 w/ G2 W$ | J0 V# fmargin: 0px;
& x: P- j9 ]+ c4 b/ opadding: 0px;
. U4 e& V% O7 M7 w' l, O" D- `( n+ P}
& Q7 {0 N9 Y4 J" M" o#pic{
6 g0 J2 P9 K, l) f: U+ z margin:0 auto;
- T; c! {0 A( H# q% | width:800px; ; z9 }3 Y" {' }4 x6 e
padding:0; & Z( n: }; y* N: ?9 r4 q
border:1px solid #333; & t# {7 m6 J$ i0 g( L
}
4 i& r! f% D5 Y# ]! S% B" u#pic img{ ( o7 l) P) {8 R4 [) }9 |
max-width:780px; ; m+ s& a7 y% C; j
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* a X4 J/ U! }, iborder:1px dashed #000;
- x2 }7 L1 \3 \8 C. J. V}
1 y. |3 c3 X. O# E' e* K; E! p-->
3 G( u3 w' f( v, s6 O( b5 ^4 x" J</style>
) b* Z- P4 q" ]</head>
2 F4 e8 _5 `5 U6 H<body> * x2 x" ]& W- W4 g% h4 o. A" R) l, C
<div id="pic"> T. |' t: w. P7 h+ B/ L
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! Y, k% {# I2 O/ V. E
</div> 2 U# J" b1 S# E! P
</body>
1 G$ s% ^, B$ T, a; u</html> |
|
发表于 2007-12-8 14:55
| 