|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ I0 t& ?& I/ |: I% N" T
关键在于：max-width:780px;以及下面那行。
( O. R1 b8 i% C/ O固定像素适应:
9 @8 W: R2 K; P
! _7 j* t# J6 f( g1 f0 }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> 以下是引用片段：) C! j/ l, V `( h) \+ x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 D# N s( R1 ~7 N% `
<html xmlns="http://www.w3.org/1999/xhtml";>
4 J( q0 c; c0 I0 Y. Z<head>
& O; H0 z J9 `9 g<meta http-equiv="Content-Type" c /> # o1 X/ H5 u8 D) E* g: \% R
<title>css2.0 VS ie</title>
3 a+ g# n0 J) U! O) d9 d: s<style type="text/css">
( U& [! n' L, @! ]7 B& u* ^<!-- ! @8 a1 r9 _! `% L( ?
body {
8 C/ Y2 W0 A, _2 \# K1 v' ~4 k; V" p3 ^* pfont-size: 12px; 6 s4 z2 ^. J; `" v0 P
text-align: center; + A& `, s. }5 W
margin: 0px; # H" R- t3 a' c4 Q
padding: 0px;
& ?& I1 C( [ c% ^}
; G+ G( f7 T* P: v#pic{
! I2 A% P, {5 a margin:0 auto;
7 s/ t3 |* u& ~/ J5 ~2 d width:800px;
% q) e; b% W% f padding:0; . _2 A0 s3 ?, x$ l" Q- Z0 ^* w9 L
border:1px solid #333;
* g- i% M6 y- C3 N; K+ _. B+ q$ u& v3 Y } / d% X; p& i" v! p" E
#pic img{
& F8 h1 [' C' o: c- D; U/ M max-width:780px;
8 V( i/ b! m% i8 @* U1 A' s% vwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
6 ^0 q9 ]4 T# I8 t9 A6 g jborder:1px dashed #000; 5 h: s% h8 G+ A
} # T1 B; {7 J* `/ Y
--> ) t7 B( r8 q( k" O
</style> / s- v& F; x2 ~, L) l8 V3 e
</head>
{" L7 R. J) q8 H, ?, G<body> 1 M0 }* L% ^# M& z: m
<div id="pic"> ! p6 |0 R; O" b
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - o% E4 a, W6 c- n
</div> $ H2 ]7 p; c* \. N# {
</body>
2 N" Y+ m- M# j0 `/ Z* v</html>
: [) t( b# w5 a
! f2 v: m' u' @百分比适应:/ g9 L4 Z! d* t+ M5 J0 p- c
以下是引用片段：- V% u5 r. q2 _3 Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 g; e# S; G6 f- _8 J E
<html xmlns="http://www.w3.org/1999/xhtml";> 4 Q$ M2 \& @3 y! L" e" C1 g
<head>
- s# G( h' r: I0 [: j, P<meta http-equiv="Content-Type" c />
" T' U2 P$ w7 u7 C<title>css2.0 VS ie</title>
. i0 ]' v9 w, b' f6 E/ ~$ T+ I: ~; t<style type="text/css">
$ D* s' m3 M1 w- F8 h& T+ S# h<!--
9 [4 W G% a/ a/ b2 H/ \body { ' E6 ?5 \, `' N
font-size: 12px;
- C$ C8 k7 e! e# _7 r& {text-align: center; " l% k" C0 c! W- B
margin: 0px; # d7 A0 r1 y, g3 ]: n
padding: 0px;
, |8 P. ^" K, e: r- l3 W} - H( X- g5 o3 A3 V! N6 _5 C
#pic{
2 Y/ ~' g& t) a5 ] margin:0 auto; 3 M) J0 t5 z A0 r
width:800px; 5 y# g* x1 _( d) y
padding:0; : w$ r2 Q* Q! q! K5 x; x
border:1px solid #333;
+ E# C: C0 J1 p7 o } 5 Q$ Z5 M }, d, c1 j
#pic img{ ' Q- J# r3 _+ Z, f8 ?0 [
max-width:780px;
8 Y) G& j3 f) c! Y/ ?3 X: Q" ^width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% r' o/ Q3 z/ y& E3 L; O. Iborder:1px dashed #000;
9 i- { E. h u/ ?4 }2 a* t} 9 G6 K0 t6 R6 ^, M) o
-->
2 }; V/ @& H0 \% y</style> e6 }. u j% R& ?
</head> $ ~5 g# a& Z7 t' A( C, ~
<body>
4 f" y% s5 q0 w<div id="pic">
. Z( K* ^; k, K5 b- ?: N) |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 d- k& Z$ q/ S' }4 ?" @
</div> 5 Y. n; m* z: d8 P5 w
</body>
' ]" A1 T$ G5 M( V2 }9 {9 F* C</html> |
|
发表于 2007-12-8 14:55
| 