|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14161
- 金币
- 2371
- 威望
- 1647
- 贡献
- 1319
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。6 b& T- _1 K1 q/ W2 Z5 i. A
关键在于：max-width:780px;以及下面那行。
$ C, H: D0 ^% m8 u0 g& Y& w% R0 _0 _固定像素适应:
' O, r& F7 i+ E! }* }3 S. N& K( r/ z6 R
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> 以下是引用片段：
" T) S1 G ^ }0 u<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 p% n3 }8 W$ J( D: y& d/ Z5 k
<html xmlns="http://www.w3.org/1999/xhtml";> 7 v1 P4 x @- V" m% L; a
<head>
' E6 p& E+ s2 ~' S" T/ @<meta http-equiv="Content-Type" c />
9 Q0 q t, j+ W: a; T<title>css2.0 VS ie</title>
- h6 v6 s! Z% a& t<style type="text/css">
8 f+ q+ e/ J" v! D# R+ g# B. q<!--
W I& r5 Q6 ^+ I" E }, sbody {
2 D. p) R( L4 _6 J) e: rfont-size: 12px;
7 z$ b F( W z# G5 c6 ^$ Ztext-align: center; 2 p. O/ Z7 R: j; i7 m$ d: O9 @; @ ^ m2 i
margin: 0px;
T% m: P0 u$ {; \0 tpadding: 0px;
8 P! w" m3 P# j9 J}
+ L9 I0 z* b$ @2 s#pic{ 7 k! d7 X" {& I( T
margin:0 auto; 2 i+ ?1 b. t* s4 e3 ]1 d
width:800px; + D5 B2 [) Y$ w2 }4 F3 N
padding:0; 8 V/ O6 ]) N. b7 f
border:1px solid #333; * S; }. e8 r$ u3 b& s, N- r
} 5 m9 M" P1 @% Q# d
#pic img{
/ q: U" N- W4 M max-width:780px;
& g! r3 M! Q# D+ b1 w! | L0 swidth:expression(document.body.clientWidth > 780? "780px": "auto" );
/ _' n4 @3 ^4 Y1 jborder:1px dashed #000;
% j. I( i) E7 Y8 B. m+ C- c6 y& y} $ s; g1 K+ z: ]' v3 F/ t" P
-->
7 j: W3 e' r: {" }: L& H: e: E0 ?+ D</style>
4 c3 b4 ^( _9 H i+ ]% |</head>
, `" A# E$ {) \6 A; M5 L" G0 {<body> 2 Z# p8 D+ l$ H! y
<div id="pic"> ( E# `6 I: b$ k# `
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " \5 N. A$ H# q( s1 v( M
</div>
7 Y$ y5 U: e* _. v7 l+ k</body> . `& s X* m# s1 v5 _/ J( ~: |
</html>
9 v# o* n" a/ X! E. T4 s
Q+ A' r: A- u百分比适应:) b" ?. v5 y+ y
以下是引用片段：
* A& B Z+ @: \+ @/ i# {* X1 U5 V# N5 U<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + b7 z1 l3 F. s9 d( i& L
<html xmlns="http://www.w3.org/1999/xhtml";>
8 e/ C( F% u' H {<head> 1 o0 ]4 X: w* k& I) h
<meta http-equiv="Content-Type" c /> " `; j/ R8 h: F: P3 Q' l. J
<title>css2.0 VS ie</title>
# Q5 j9 d3 V3 f0 r, e<style type="text/css"> * {0 s( m, a% t& V7 i' [9 \
<!-- g* U1 k2 f4 G N9 ]
body {
, m* q) ?5 a) U, q: L+ n" \! Cfont-size: 12px; ; X, X5 }, X4 P1 x# d
text-align: center;
: s9 V6 n G) \5 a4 M6 B1 _margin: 0px; , p4 C6 x8 D" X2 i7 t, M
padding: 0px;
, L/ a/ n! u: z; J0 Z3 B} . c; r8 {( l( C& h
#pic{ ; c' z y; |: @( g* Z
margin:0 auto;
& U2 [( b+ { G width:800px;
, C2 N( M% q! d, x padding:0; 5 k6 t$ I$ z4 @8 S
border:1px solid #333; 8 m. d7 m& Q+ Y& p% A) R8 n
} , ^& [# c& P: b* s
#pic img{
' Z/ W! b0 w. \' f0 C max-width:780px; ; Q9 H D0 @3 C' D3 x8 |1 }. `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ s+ B9 v; T' u$ n2 tborder:1px dashed #000;
3 I6 R0 E$ N1 N7 M} 8 U* z( a* h8 O2 h% h$ i8 H- ~, Z
--> , D( s- @- D+ F( O- I0 {
</style> 4 i* @2 s* [4 P
</head>
; t3 G& [3 h1 ~: \4 Y<body>
+ f3 c3 h! l! h6 o<div id="pic"> * P p: Y9 E( h/ x2 ^: V
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 x, G. C: S) F8 M* c</div> e! H7 Y. H4 w
</body> % `$ H# B* o& h( u1 W' y
</html> |
|
发表于 2007-12-8 14:55
| 