|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ R: K7 M" ~! ^4 J
关键在于：max-width:780px;以及下面那行。2 E1 e# v5 x. B# J) X
固定像素适应:7 E/ L: ^! G: @' ?! A& F
* w# r. c1 i& v2 r: Y9 ^
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> 以下是引用片段：
/ J$ a" O8 X Z( ?7 q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 C }% @: }* j; O; E" K$ E& C<html xmlns="http://www.w3.org/1999/xhtml";>
4 O& v- e# N; z# ~6 ?<head>
: o1 u- k* I T. B( V; ~4 h<meta http-equiv="Content-Type" c />
0 X, q* F- W1 a. h- W<title>css2.0 VS ie</title> . K; H5 J- `$ i s" p/ @
<style type="text/css"> ! Y* ?5 g" A5 m& Y: z; E
<!-- - q, C' l+ K- `0 T& D% U. ~
body { . ?* r" ~7 x1 H! ?) s
font-size: 12px;
# ^3 i3 p0 |4 Y; X, ^5 Ntext-align: center; , i/ `8 c, e, E" A4 Q z
margin: 0px;
( L4 |6 ^4 i/ l+ ~4 G% lpadding: 0px; & x7 |' q& {3 [/ |# f4 i _$ k
} ( r2 t q% F9 g( F+ y' ^+ H! y
#pic{ # F. A- m8 s0 [& \' }) z0 P
margin:0 auto;
9 S& u1 X) Q- Y; r* C, j( n width:800px;
) y+ ]* ]' ]- Q( d( X padding:0; 4 f7 \& K0 ]$ z: x# F' E0 P2 y$ k0 V" m
border:1px solid #333;
- l( H% ^$ _! M5 w! t4 o }
q# c% b" s: T# e( d( G#pic img{ 3 G, t& Z8 u& x1 b
max-width:780px; & H$ N1 O* h4 [
width:expression(document.body.clientWidth > 780? "780px": "auto" );
4 j# `3 l( L# d( M7 cborder:1px dashed #000; ! b7 C& U' K0 D* o( d' a7 i
} * R/ m1 F' H1 f3 Z W9 d! m
--> 6 T" Z4 X' z6 k* M
</style> ' Z; p* U- M2 x& L) D
</head> 0 d( @! n- N' t* w+ N/ G# w7 e
<body>
2 t+ I) J' f: T& Q) y5 ^3 k9 g<div id="pic"> $ N' e4 ~( i. T2 K" Y* G+ V$ P. h: ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- `( h) R) b6 V2 B$ f( T7 D</div>
9 n% G" Y. _4 I' @8 e</body> : c4 B: N9 n- q% S- _0 d
</html>
& O. E* s" ~5 @$ ~! F7 y) K6 e+ {8 W ^) _
百分比适应:) y$ f3 D/ @1 R+ [/ d1 S) I ?
以下是引用片段：
- g' v1 n5 ^: J$ V3 [( Q7 q7 Y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 p& U- w4 _2 R. D, o
<html xmlns="http://www.w3.org/1999/xhtml";>
1 j* D# d. R# @4 Z<head> ( h7 R6 R4 j/ b0 ]3 m L
<meta http-equiv="Content-Type" c />
' x9 |# m6 \& k<title>css2.0 VS ie</title> + F% v% U7 L! M0 d+ E
<style type="text/css"> + j! m. o; i( e6 L _
<!-- 4 l! R% h I6 w; _" Q# \
body { 2 m$ l v# s: {3 z8 q) r3 e h* a: Y
font-size: 12px; 7 y* q( h* L/ U
text-align: center;
" ?, O5 ~) V6 t2 f) ]margin: 0px; " n, ~# Q+ D2 ?) J
padding: 0px;
" F# {2 h* C# M& ]3 x}
$ m6 \1 K- q% w* M5 W#pic{ $ t& W4 c: b* S% }
margin:0 auto; ; {) N7 D9 _* S0 G! r! V, g
width:800px; 8 x% Q; r; y+ k% d3 O' C6 {
padding:0; 8 a% X1 n( K$ F0 U4 N4 ~
border:1px solid #333;
3 b0 C4 u+ g: t/ N c: b) z } 9 V5 I5 U, Q }# x& [
#pic img{
- P% q0 Z* h- J: Z: m6 |) e max-width:780px; % n8 k, s+ K- A* y7 E- v
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ u; i: c( ~8 w. d) t4 L, Vborder:1px dashed #000;
* X$ `6 e2 z) M- h( O/ M* n} 3 ~, x3 H: `5 z# F; ~2 l4 `4 |0 D
--> 7 T) R" `2 r& k( V$ M8 }- b5 c
</style> ' j$ i$ }) U. f. F% H* B
</head>
?- S% B! j9 a9 d<body>
F) Q# o. n3 z: F<div id="pic">
4 V6 Y& V" T0 W0 F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & {) F% F/ _$ `7 ?7 ^2 P
</div>
/ S6 s" |; B3 Z& e5 Q$ r! H</body> 6 F: O4 ~- X3 D1 q* h
</html> |
|
发表于 2007-12-8 14:55
| 