|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14437
- 金币
- 2504
- 威望
- 1647
- 贡献
- 1452
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" J1 y8 F3 E; O* O. y% n6 }关键在于：max-width:780px;以及下面那行。+ s2 G J+ x# u0 O* G, z
固定像素适应:3 r. g7 V7 B6 H
0 s( }+ B" R* }0 Q) Cdotted; 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> 以下是引用片段：
q3 F9 m& K" d3 G# h. b& M% ]- O<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 j/ u' G/ I4 J<html xmlns="http://www.w3.org/1999/xhtml";>
8 q1 P; P0 S: F( f$ K# E<head> + r7 E7 ]) I9 D" b( n
<meta http-equiv="Content-Type" c />
2 z+ L* l7 v/ d n<title>css2.0 VS ie</title> ; s7 z" t5 ]6 |+ ^3 i" B
<style type="text/css">
! a& ]# p% x' E& r( y: g% r1 O4 w6 J<!-- / F# b+ _4 v6 K& P* w8 l
body {
$ E3 M( Z$ y& o, x$ G! q$ T$ Vfont-size: 12px;
" ~( ^. R w# W8 ptext-align: center;
/ t" b9 i! O6 f4 Wmargin: 0px;
& |1 r+ x! \+ @% R+ s6 g) v" Fpadding: 0px; # @# b5 Z; Y3 p% W( Y8 T
} : b5 }1 U5 N2 p6 r6 i- {7 Z
#pic{ 4 E/ g0 e* S9 Z( Q, }
margin:0 auto;
Q' R7 b1 c( s& s C7 Z0 |, @ width:800px; 9 m8 D9 |, _( ?4 |
padding:0; ! I$ j/ ?, ^' x: b
border:1px solid #333;
3 H$ m9 C6 S% G1 @# `5 e$ _+ j C } 2 Q, G( j5 \* u
#pic img{
* n+ D1 Z) p: ^; H. Y max-width:780px;
5 z' y# c, U: W. q+ p/ Gwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); + i1 `7 |/ \7 f) a/ a1 }
border:1px dashed #000;
! M8 l$ c. g, ]5 x. N}
* F' a1 J6 |8 `-->
7 x- V* u* a, A7 o8 k0 P, O+ R$ t</style>
3 C; C( v ~2 S& w% @% h/ b</head> 5 r7 C! m6 Y' [3 ?. T
<body>
5 X/ ~0 Z* w( E' U0 D<div id="pic">
% ^7 j" {! k- v$ E<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% _8 n$ U+ b! B" P) ]5 [</div>
x4 u7 P, i3 ]9 Y</body> 5 w4 I) a& B. [' I5 k
</html> 2 ^+ v9 d: g8 A$ V$ N9 o! l
2 H$ D; p! h# z2 d% z# _3 `百分比适应:6 |, ~% a+ `( l% ~6 _
以下是引用片段：
! ? c. j! u# o8 }* i) ?4 B/ O<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
n% a% s0 A6 ~4 N2 }& n0 X<html xmlns="http://www.w3.org/1999/xhtml";>
3 ]1 z, z. e2 o7 g0 b# E T7 k<head> 7 R! F, }6 S7 G3 a4 w+ Q# i( i
<meta http-equiv="Content-Type" c /> 4 ]8 H I7 e3 P/ N
<title>css2.0 VS ie</title> ( H* `' E8 q8 N) s
<style type="text/css">
" m" e' t9 }5 Q, p( K8 i8 Q<!--
' o1 i- X$ p- `0 w0 S: {; ~1 Jbody { / I' [4 {' z0 Q+ W( N: j, J" C
font-size: 12px;
% G+ y1 d) J( X5 n& \ y& X: htext-align: center; ) n" {/ V1 n L
margin: 0px; % O7 b& w5 p( \! I* \
padding: 0px; 2 m4 ?' |2 L6 _' i! ^5 K
}
! r, L) N h+ y" a#pic{
; b8 V+ i. f) n3 A. P margin:0 auto;
$ _- k8 B, n$ \. I5 j width:800px;
/ C6 Z% p, {3 X) {+ v k, o padding:0; 0 K( F0 b9 q H6 b& l; H3 I9 C
border:1px solid #333;
. i; k, _! m3 v' o }
3 P- A5 w' p Z. O* X7 V5 y. `0 K. N#pic img{ ( B N1 [* S8 w! r" s
max-width:780px; 8 p [- ~) e+ F
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( G0 k6 ^( z) ?) pborder:1px dashed #000; . y# l6 B3 K/ _9 N
} & c/ u9 q/ u! ^8 z0 u
-->
/ t3 p( s2 i8 x6 g$ h3 d1 Z</style> " [: U4 t/ V) r
</head> ; ?& {0 a, _: Y) V5 @
<body>
+ y8 c, v8 L& n; D<div id="pic">
1 n! P z$ u4 p& S: H% n: P: I<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! W+ R# y: i; s6 V
</div>
3 M7 D/ l0 O* L: @& A1 h</body>
8 B/ l: T; P1 i' l- N! }</html> |
|
发表于 2007-12-8 14:55
| 