|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14397
- 金币
- 2484
- 威望
- 1647
- 贡献
- 1432
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。. V5 v/ `# U3 r1 |7 A9 A
关键在于：max-width:780px;以及下面那行。
* }, z! w: ^8 S9 J/ g/ g固定像素适应:7 x8 x$ @! E6 E6 w9 ]3 J) e: G
9 Y* e5 }' J% B7 J
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> 以下是引用片段：
* l" [( y) l, S+ g( w<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ q& @! {* u* s B$ w<html xmlns="http://www.w3.org/1999/xhtml";> 2 L) e5 g$ X2 F& g
<head>
. C+ V* }4 ?7 i$ W) _% K<meta http-equiv="Content-Type" c />
3 Y# V# u1 {9 F5 t- l# O0 C<title>css2.0 VS ie</title>
% S5 I7 x1 j' b( u& u# J<style type="text/css"> & b+ x4 D2 N( g$ Q; @% [+ Y
<!--
/ g2 N! c& f! |# T! m: W9 l. Kbody {
^% u3 {- h; I( M& W4 S8 I& n- Zfont-size: 12px;
; r* j1 c: s+ Z3 l- \. `0 Rtext-align: center;
$ b! S( C) k& n- P- a! Wmargin: 0px; 0 E3 p3 I$ }. \- r# H
padding: 0px;
s8 O$ [% k1 |* I$ d}
8 e3 {" O( h' o#pic{ ( @4 E! s) p7 U
margin:0 auto;
3 w* t* y, R. a! i# K width:800px;
; l4 s" ~6 D0 y( P2 l padding:0;
2 M I0 D$ R- S* N& n9 I border:1px solid #333;
, k4 l. y6 G& x; L7 l3 {$ {& V } 2 [( L5 T" W! p& }. l! _
#pic img{ ) s/ P: @3 W9 g! O& B x
max-width:780px; ( n6 r# w4 \8 T+ L# N0 R
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 8 Y3 ]! j. L2 g2 S
border:1px dashed #000;
. G' P; U: r: w1 k, V `. [$ V}
# o3 u4 E- o& z$ J7 H' Y-->
% y6 J% N Z9 |1 A5 y1 p$ u2 I</style> + T5 t; i% }0 a* U n- J' [
</head>
0 S' I+ E) J3 b0 V) G m3 B<body>
- D# u" d! x1 v1 B9 d) N0 j5 i<div id="pic">
; u: x* w6 r i0 G; P! J" {7 F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - b9 A) P0 {8 x H/ ~: e
</div>
! X* G: A! V" d4 n& S; W</body>
/ S R) o/ _4 C) m5 G" b</html>
7 o6 [$ F% [- a# M( q( C. T1 ]! o" R$ z
百分比适应:: [1 r9 n! \+ P4 d0 {
以下是引用片段：* D2 x# y, g, V9 i+ u
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 `' l/ Z' T; z8 z/ {
<html xmlns="http://www.w3.org/1999/xhtml";>
* P% s2 k2 ]% \' R; N5 o<head> 3 |. ~$ i2 ~) m
<meta http-equiv="Content-Type" c /> . h: X8 Y, _# F' O2 w
<title>css2.0 VS ie</title>
7 m7 q' s* C) w: u<style type="text/css"> 3 e+ g3 q% V) Z7 A6 |3 y- {! `
<!--
! ]: o L7 y9 A0 F2 abody { # |0 \$ ]% G+ B# z; ?% F
font-size: 12px;
Y+ P# ~# o+ Q/ T7 A3 _2 ^: Jtext-align: center; ; D" ^; y5 A! J5 V% b! ]
margin: 0px; 3 {5 a( }! y4 T6 S7 q% \* C* X) }0 T4 e
padding: 0px;
" y! K; _- \" M, f ^ p+ c}
8 t9 C# V$ t2 {- T4 z#pic{ ; ~$ w. x0 `, T X/ I
margin:0 auto;
6 L( s2 A: X* [+ n& Y width:800px;
8 e7 V: ~/ u0 v; c0 o" q. e( t padding:0;
1 t% d8 C7 |! m border:1px solid #333; * z' M' I) j. Y# u% h" m
} 5 `$ {3 y5 v. j2 ^1 y8 }
#pic img{
% |8 e1 x s; O% t3 U, _9 Q2 L3 \ max-width:780px; . U/ E0 X" X( }- o! z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); / |0 A9 Z+ u9 M0 Q& j) L# E5 b
border:1px dashed #000; - g3 ]& N2 f$ J% S# U, S% n
} 6 w4 x2 g8 Q2 q I6 |$ @" W
-->
# q5 c0 m( r) A q" d</style>
+ a3 w1 V9 {# n+ Z</head>
7 ] U/ E: I3 g1 f$ }+ |- z0 I<body>
: j9 H H6 x! y, t( `+ C<div id="pic">
; v: \4 l; f, ]: D Z; q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 S9 y" J5 J! m- k) a6 C7 F
</div>
# z4 `4 ~( D' B: J1 r1 ]</body>
8 z4 n9 ^: z+ @" y6 s0 K</html> |
|
发表于 2007-12-8 14:55
| 