|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ R$ N# f2 q& Q, P( o$ s
关键在于：max-width:780px;以及下面那行。
3 O- `6 K) W8 w% K7 W, j固定像素适应:! q* R' l3 p2 C$ j- B1 n/ V7 j
" L6 ^' n; J% k5 W
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> 以下是引用片段：
1 f7 _$ L" b& Q/ _3 m<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, V* |! ^. K) _* E5 D$ N0 o<html xmlns="http://www.w3.org/1999/xhtml";>
: l7 u- e( i, y<head>
; s. ^+ W1 q$ i; p( M<meta http-equiv="Content-Type" c />
2 t# G' W1 V ?: X4 Y# R% b g<title>css2.0 VS ie</title>
+ R" ~7 n9 {; h; F# C K9 _<style type="text/css">
' ~ N# I! O* d% o. T. @<!--
' j. Y/ N/ e$ m* r; A1 z8 l7 Nbody {
6 p- h# o: E( o% ]/ J. Tfont-size: 12px; $ Y6 [$ [$ j$ \* f) M3 w0 O
text-align: center;
* n8 i0 B2 \5 h. Xmargin: 0px;
4 L- `. B1 h+ _( n3 G( I& ~) T" _9 ~padding: 0px; ; w5 m9 @" h; }8 G
}
! ~- O$ B# }; u+ q1 s#pic{ & t( T: f8 b7 {6 K t- r$ n
margin:0 auto; 3 w. d+ i: g2 r2 \; G6 L! X4 ?
width:800px; 6 c1 M( V& d! G5 i+ X
padding:0; 0 ?: L+ }2 k8 {' I- P
border:1px solid #333; / K& H" e: Y& l) s( ]) R% E g
}
' C' O' h3 w% J% q1 C: |#pic img{
4 l, M3 `8 E3 N* d max-width:780px; ; H/ x/ a/ j! ~
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 0 e/ ~- l( I( A& V
border:1px dashed #000;
' C; ~9 d9 @" Y8 q9 C2 e}
+ X% v) F* {' |& e--> $ h1 O. E8 U! J2 i1 C& T1 a
</style> ( Z& t2 w0 ~# n- ?$ o: R6 t
</head>
2 `3 ?; k" b% _8 }& G$ ]<body> ) u& _2 ?. E: A3 m J M1 s) j
<div id="pic">
: T0 X# C$ N, Z! @( N+ n<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 O3 i0 P; `# t
</div>
/ Q# W+ e- }# l' |8 I7 ~1 s</body>
: v7 D& G: L& f) @& w. P E4 N7 m</html>
4 D: f& I: }& H
/ N8 R# v" H5 a' ]9 ?百分比适应:
" Z1 |7 E: F5 ]% v3 A0 {3 a以下是引用片段：0 p' j# i T. e1 y# [# f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# }. {: ]0 ~ f& f6 q0 k8 |- L0 v<html xmlns="http://www.w3.org/1999/xhtml";> ' F, `/ m0 P( _' D+ N( b
<head>
+ j# V0 d: Y' `% E; z9 \<meta http-equiv="Content-Type" c />
8 k! z: ?# I! P- m7 N7 {4 O<title>css2.0 VS ie</title>
( k, w3 \* E* Y; @, d1 r<style type="text/css"> ! G* j4 {5 g1 B- S& k& i
<!--
' U9 H) Q7 g! `0 ^: Pbody {
8 W2 Y6 F! {6 J: i0 f4 ~font-size: 12px; $ P4 @9 z, \' D6 i# U' Z' A( y
text-align: center; : C1 R: R! T! j, [% M. S( A5 ~$ G
margin: 0px;
( p% k, a3 f! e, D0 k1 I/ Npadding: 0px; , u' |$ }% L0 H: p# x
} " V: Q3 q0 H C0 i. u1 }
#pic{
" C/ B" e( x+ W margin:0 auto;
/ e. L1 e( C( x+ ]. @& K, y width:800px;
! d7 W9 A- K, E7 Y padding:0;
8 ]3 L5 K8 s* `% [ Z border:1px solid #333;
. `! u7 c+ @+ g+ x } ' {* a9 {$ p: z% i; t
#pic img{
: O# w) S4 h# U" g$ A" M max-width:780px; & N) p1 [ c$ b$ T7 T9 h2 P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , Y4 Y) C! } m: R: S# W4 z
border:1px dashed #000;
6 @5 C% X; Y4 Y- o7 Q2 F( ~& U} 2 Y, ?. K# k( I8 e3 {% E; u% I
-->
4 h8 J7 z* ?' S+ w% O2 n$ v</style>
& H8 o5 c A( {, ?7 G</head>
$ S# Q1 @3 j. Y/ r<body>
6 L G! l6 c& R# z s0 b<div id="pic"> $ b! H6 j6 R% R7 ~- ^# U( {) |# i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & v: i5 y$ m1 {& I3 j7 `4 Z
</div> 8 E( u8 `: O$ X* q1 Q8 @
</body>
0 \ D. i# p# Q$ H( f</html> |
|
发表于 2007-12-8 14:55
| 