|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 ~6 d5 X' \/ j* Z$ z9 f( x
关键在于：max-width:780px;以及下面那行。! d- r$ P1 J" H
固定像素适应:6 C& u9 H3 b3 k* Y
& Y5 k' z- \3 ?, L; ]4 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> 以下是引用片段：
5 X" X/ r8 y5 z- H z<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) g4 f% z* m0 g3 x8 o
<html xmlns="http://www.w3.org/1999/xhtml";>
3 {4 C: H5 P T, j' N( ^, m<head>
$ t( w6 W4 c' s<meta http-equiv="Content-Type" c />
' ~. l2 R8 X2 l- W" m+ e3 V<title>css2.0 VS ie</title> % f2 M+ i: k0 y# D9 {! l
<style type="text/css"> . K( I) z8 j8 h' @ n7 t" R
<!-- 2 n$ x/ I$ i& \8 B
body { ; s3 ]- K& f$ e- [
font-size: 12px; ! z7 H0 w1 E2 B% ?/ C
text-align: center;
; v3 z0 C9 \6 J& J2 x5 A) [3 rmargin: 0px; & Q. W+ ?1 u; q; z, }
padding: 0px;
: ^4 l( E+ w! h3 d) z}
6 d1 N# Z5 _3 R+ q#pic{
1 K( j% Q S' ~& {+ w/ B' a margin:0 auto; , N. r- q m) t, x$ O
width:800px; 5 M/ D* X6 w- C
padding:0;
+ m/ _; L! `* V1 A border:1px solid #333;
& d! w4 e% f" C9 S' }7 ]3 O0 c } 3 R! Y" _7 P' e# @4 N" Z
#pic img{ : n( [9 Q+ p+ a
max-width:780px; - D$ u8 D# ? n5 U* u# T
width:expression(document.body.clientWidth > 780? "780px": "auto" );
% P+ F4 p$ R$ K: I! [7 J$ Gborder:1px dashed #000; 0 e+ N, f9 F* \* J
} + r7 n& p; j' r$ U+ F1 m
-->
; d1 B p6 W x</style> * D3 k& D5 i0 W% t0 g) c, Q
</head>
& y) M5 F4 x3 E" S<body>
& [! J4 @, @% \! h# |7 Y<div id="pic"> & k8 H; E/ K3 H& i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 M- a- X [# S</div>
( F$ O1 m% z; O9 J8 x8 F9 \</body> 0 [4 M% y* U+ O
</html>
* T2 Z. N$ c# ?
$ e) F% [* C1 _! D7 S( `: T百分比适应:
: G E K1 ?/ \0 ?( I( X: W以下是引用片段：; t# q/ S9 t( `: f- `; z# ~! X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 F, }; C- ]1 Q+ e
<html xmlns="http://www.w3.org/1999/xhtml";> , [" W6 N2 W1 v( m$ m* j0 h
<head> ' d( n6 ]" a% u: o( H" o7 e
<meta http-equiv="Content-Type" c />
: ^5 B& G! ]2 m# G- c<title>css2.0 VS ie</title>
4 S3 ?# E9 t2 O7 t<style type="text/css"> ' j& ]0 T' m! V1 t* O
<!--
8 V, K& T2 p0 R0 `4 ~; E' j' J- j+ b3 \" gbody {
7 k9 @5 Z9 L( R) `font-size: 12px; 7 O- ^. @* B7 u: i
text-align: center; 7 E- g& }1 m5 C h4 m, E; D9 K
margin: 0px; % C5 x+ Q; z( d
padding: 0px; ! r* Z3 P: B2 s0 Q7 {4 S
}
3 Q" G5 j9 u: c6 Q; R( \3 e#pic{
% J0 C# e5 v8 o+ k* a margin:0 auto; & I1 X" R3 l$ @0 A
width:800px;
. Z7 F5 F& G/ Z( F8 _ padding:0;
$ J9 o; J0 |# L1 F7 f border:1px solid #333;
2 G7 a& J) b9 r, | }
8 r6 i6 G- {, y1 G6 ^#pic img{ 0 i6 `/ a0 V: m. E$ M, o- p
max-width:780px; % T, R8 O7 E; G* Y, N
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 8 l+ }# a3 j3 a3 a5 X, C' Y
border:1px dashed #000; + B: N' [3 k" P3 f4 }
}
# [8 c o, e! {( N- _9 ^. S$ K- Z-->
# k G8 _4 ]! F9 e</style> + T3 S$ f, \; V& U
</head> 1 k& I% c# v' s( K; Q8 n. f
<body> ( k i/ h0 J+ z/ e/ r# N- S
<div id="pic">
w) Y* y) E0 K* |0 \- H, B/ M$ V<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 ^4 `5 U" u( {1 h5 s! b</div> & [0 D3 O4 D: s4 T: y+ ~5 a
</body>
7 ~9 I2 Y H6 E0 W- c) L) B2 n</html> |
|
发表于 2007-12-8 14:55
| 