|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。' v5 q; H+ i7 p1 ~1 t3 A
关键在于：max-width:780px;以及下面那行。
: }7 \& |) o& Q4 }固定像素适应:
0 ^% u2 g, w. S4 _9 k% G4 h0 {# C& D; \: p- ?: }* 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> 以下是引用片段：$ R/ l, g9 o6 [6 j+ o2 I E4 V4 Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 t, O, C. S0 ?* |# o9 h
<html xmlns="http://www.w3.org/1999/xhtml";> 6 g6 X: p, l' [+ V+ u% x& I5 N
<head>
( C8 Z% Y6 `/ V1 e<meta http-equiv="Content-Type" c />
0 U. t1 O. {+ ]2 p+ [$ d( R<title>css2.0 VS ie</title>
: R, h; z6 E& A' w<style type="text/css"> % G5 y! Z& u% P% y& {8 a
<!-- 6 P( K" u9 d- E0 M5 a6 {6 M1 [
body { 7 ?" `% j4 V7 M k3 X$ x
font-size: 12px;
5 F+ m& z9 D$ t; ~' S: itext-align: center;
& m9 G0 A5 h/ m: f& Q h0 l4 i/ q7 Emargin: 0px;
' i3 Z$ i+ ^4 z1 o2 C% O; [padding: 0px; ; f4 T. R) r$ s( \2 v! Y1 S$ |( w
}
; k# p x! M7 |: p3 J7 L, V#pic{
" } e( ^( G# G5 @ V2 i margin:0 auto;
# a& H, [* g/ A width:800px; 5 H+ R% ], g/ \' c' F- n5 d+ y
padding:0; , ^8 g; B9 m6 O8 N
border:1px solid #333;
( g L! }+ s4 \. h8 u, E }
' A) ^& A) X, ~1 c0 N9 W#pic img{ 3 W6 H+ i- o1 m6 t. p
max-width:780px;
9 \0 N: K: g- R( awidth:expression(document.body.clientWidth > 780? "780px": "auto" ); + n/ d7 L$ R0 |. s/ M
border:1px dashed #000; 2 _& t% U, R: O _4 p4 b$ q
} 0 L4 P3 ?1 Q$ n" l& S( `' X6 ^
--> , {# G9 u; s0 | N$ P
</style> ( ~0 c! E p) F( v
</head> L9 p( r7 W8 k' ^* h/ _
<body> 1 Z2 N6 D0 _5 x
<div id="pic">
: ?) P" E. m0 d! s<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 F) q9 S+ ~% j. R( ?) F1 K7 @4 D
</div> % F- K" d0 Q% g3 M
</body>
; _% o; Q/ J, T- E1 H' _1 v</html> 7 [/ A2 @6 z* ~& s) V
: a; B* L5 J- Q$ F2 C; B5 B百分比适应:* M* s6 y6 ^ n+ c( W0 L1 y0 q+ C
以下是引用片段：
2 B( K7 {; X# @+ d<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! x' D0 c0 h* X! j
<html xmlns="http://www.w3.org/1999/xhtml";>
/ `2 B/ X9 U, A$ |1 @<head> : S! f! v7 u A/ P$ U" j
<meta http-equiv="Content-Type" c />
% q: u$ V P, t<title>css2.0 VS ie</title>
6 B7 ?) b+ H6 _5 |+ z' s<style type="text/css"> ' A1 x, A* T" ~# M. L8 N
<!-- ' M# y9 S9 s# d- S4 X2 S6 ]! i0 b
body { 3 h' f, D* {1 H& f- y
font-size: 12px;
; |3 E) I& M9 Btext-align: center;
' C; |# J5 W! omargin: 0px;
8 _5 Q4 g- z4 z4 P# R$ c( A! _padding: 0px; : l3 V$ x, k' Q, R6 i6 D# v) W
}
9 s3 A: D* d! _: v: g s- \#pic{
+ v Y# y- v* [7 F' h5 g+ X margin:0 auto; % t; G* A) i! X- r& H
width:800px;
% o' C' J i8 o( [ padding:0;
' q9 K7 t% a, h" h7 ~9 ^ border:1px solid #333;
- C. }" D4 H0 Y1 v }
' f4 s h8 q I2 |5 H3 q#pic img{ ! P/ d! Z: x7 V9 b
max-width:780px; ; ]/ x) [0 f3 B% t: d" p/ z1 w8 Z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 C! `0 L. |1 T- ?3 xborder:1px dashed #000;
* _ J) v2 a2 Y) r1 r5 x# I! y% D}
+ C' [0 I7 y$ U. o-->
) R8 L! x" a$ r" p- m# _2 v% a</style> & m+ p1 S. d, r+ f5 V2 r8 o
</head> , C! m5 c& K! F5 @( q0 Q/ d i
<body>
7 e1 ?1 V2 @# J* P5 j9 j. g" g<div id="pic"> - f& m% }' c% j' s( {( u% a
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 O% ^9 d6 l$ ]6 X* F3 n+ r0 g. k8 z
</div>
- u* l) m! I7 w$ }8 I6 U4 q6 h</body> ' @: h6 T! A# \: m( T# l; l
</html> |
|
发表于 2007-12-8 14:55
| 