|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14249
- 金币
- 2415
- 威望
- 1647
- 贡献
- 1363
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。; Q& P$ l; \3 v4 y3 ~
关键在于：max-width:780px;以及下面那行。. ~) x1 ^; \/ y
固定像素适应:1 u% |7 i" W; t
3 i: Q3 m& A: |
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> 以下是引用片段：! o9 c5 l4 b( l+ ?# ?0 L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 {& a* j* Y; y/ V8 r<html xmlns="http://www.w3.org/1999/xhtml";>
8 c; l- T8 }1 n) d' w<head>
+ {1 P9 g7 k+ `<meta http-equiv="Content-Type" c />
; b6 H, }3 k2 U! W4 Y3 c! a<title>css2.0 VS ie</title>
8 Y% g0 P2 b; H2 e X) U<style type="text/css">
6 _- f3 g7 m0 I# r I<!--
& z- G3 i( c6 w# v3 U+ b9 D3 mbody {
( U* a! [* a2 V, \3 V) W# Q1 jfont-size: 12px;
7 k3 w# n5 c: T. _4 F4 Z `text-align: center; $ g1 i9 W+ k$ G' n& _% b) h
margin: 0px; L& ]( d7 X/ I/ `; `8 M4 o% O
padding: 0px; ( V3 Z5 M: a1 I7 O4 C2 e9 N/ e( E
}
t2 n0 N3 I* `3 k7 K% r0 Y2 T#pic{ 9 S/ v; X6 d2 ^) H/ h$ ?
margin:0 auto; 6 I! z) s" L" M z4 n$ w
width:800px;
$ s2 ]! J' y2 B) ?8 Q N padding:0; & ]$ Q. O1 O9 ~( {3 q
border:1px solid #333; 6 D+ X/ d) c" K
} + F/ k' Z3 H/ K% p5 ~
#pic img{
$ l5 q: D" E" z q, d max-width:780px; 2 Z8 Y( Z" n7 l
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 0 l# V G0 S. Z; z# x, k, M H
border:1px dashed #000;
9 X1 @- D9 D4 K0 I7 v" \}
& l* y/ u8 q8 a1 I6 ^+ t% }3 y--> # A/ ?/ }" E+ e
</style> , I: |9 p z. q$ B; B# ^, o) ^! o, S
</head>
) r; t) P- `% H" H8 u<body> 0 L6 U7 K( ?% {; m7 A* F3 T. t
<div id="pic"> 5 F( z& P1 m' [+ H6 L! z1 C
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! \# q; a* S* K0 C8 V. D+ Z</div>
9 z/ s2 G2 h& B5 S$ y</body> F3 t, `1 b( d& A: J0 ^5 n$ `
</html> 5 Y% m! a/ Q- H, l3 m
2 r* r6 Z1 W2 V. Q. y
百分比适应: g* y9 ~5 U- G0 D
以下是引用片段：
" l" P$ f4 b/ d$ f |% r- u, k1 f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ( |1 S/ i8 \% ]9 x1 @: u# i d
<html xmlns="http://www.w3.org/1999/xhtml";> v$ v# T5 G7 F
<head> , o% G5 G" P! A" g* W; s
<meta http-equiv="Content-Type" c /> 8 k3 N0 i3 w" ]
<title>css2.0 VS ie</title> ) V2 }! H2 M$ b
<style type="text/css"> : _3 Q" ~8 q$ O3 A! {5 i
<!--
# ]4 |) v9 k+ b/ @& Qbody {
- P) i! {6 H8 V0 d5 ]font-size: 12px; # B, n& o# g1 L! r5 [+ U
text-align: center; 8 ` R, `7 j1 A( ^" m# ?
margin: 0px; w- ~6 j% @9 K; _% v& @: c" n
padding: 0px; ) J( K) z7 R: T$ f" b" Q+ j
}
0 k# ]$ X( a2 O, T, I#pic{ 5 [7 W8 L* T" H y1 Q
margin:0 auto;
. L& }5 m, d4 u& m width:800px; 6 s/ n0 ?( M& w
padding:0;
" Y' ]: c/ Z/ _5 L, |6 r: u* } border:1px solid #333;
" h7 R( P2 U# v9 h( B) a }
% T A! b7 [6 X; z; N#pic img{
. g$ t5 C* J! Q max-width:780px;
- u# G$ d$ f4 n5 t; p9 hwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 V; v3 B- x: y5 ^
border:1px dashed #000; 4 ]4 P7 u" R/ \! Q5 z* t
} / g* u0 \# Y9 a
--> " R M$ z% a' x8 X
</style> - V+ }& o$ ?& @8 g
</head>
4 _8 Q9 R" b+ J<body> @% `7 u8 {* r5 B0 s3 h# e6 H, m4 ~
<div id="pic"> O3 X) c& X# ?; j0 ?/ y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; l+ X5 x4 e0 y" c0 q" c1 ~
</div>
: ~# \6 A6 w0 w5 I' E</body> ' s. ?" l1 f0 X: B" ?. L' H
</html> |
|
发表于 2007-12-8 14:55
| 