|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14337
- 金币
- 2454
- 威望
- 1647
- 贡献
- 1402
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ L4 b, y, W+ H6 w: j. ]% v关键在于：max-width:780px;以及下面那行。$ {( b0 s. T) \' A5 |
固定像素适应:* Y2 m6 F n7 M# V* o% i) m6 K
8 i$ g. b' P8 s! |
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> 以下是引用片段：
: w: s" `% H5 I8 `* p<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ( P2 n3 F3 | u
<html xmlns="http://www.w3.org/1999/xhtml";>
) [/ x& L9 o9 S. H3 @1 }1 g N8 `<head> 1 q* n: p( ^. _
<meta http-equiv="Content-Type" c />
k( a% _4 M: e. m<title>css2.0 VS ie</title> 2 V ], O1 r! _( a, y/ D9 r
<style type="text/css">
- X. P* u S+ d9 M+ k<!-- + Z4 w( x9 c# }/ b- R
body {
# T1 }! k S# R! ifont-size: 12px; , i4 n6 E4 B- u: ]% B" a+ m
text-align: center;
, Z. A' ?8 ]& @' M5 [: [margin: 0px; " T9 N$ k* w6 `. Z
padding: 0px; / ?9 O9 I6 |+ f: I- L! n
} / d5 M/ c' \8 `1 L$ H! T9 ]7 c
#pic{
9 |0 J9 b6 W0 R' U1 e L6 s margin:0 auto;
$ [' B) ]( {& { width:800px; % ]# \& C. _# z+ ]0 t: ~5 b2 Y
padding:0; * [+ s' Q6 Q* D' f' m! O
border:1px solid #333;
6 ^0 ?6 I" N/ N& x } ' u5 H+ I1 n9 K& ?3 L- k: `
#pic img{
: `# Q) s z9 v* y7 `4 p8 r* u- t* [ max-width:780px; 8 z9 [9 `/ p% X5 \- R
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: S: B0 ~& P- Pborder:1px dashed #000;
+ Q+ Y1 F& G# Q4 D# k2 {9 ^} 8 r- }0 X2 R ?1 x
-->
) g' J9 ]% R+ w' H" m J</style> & I& S( I; b* P# K
</head> - {4 U6 J* x3 A2 v+ `$ U- m
<body>
+ a. N- K) g) i% e! D<div id="pic">
, L$ c* i7 ^: \<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " `( i) Y- T$ V4 C4 C
</div>
* ?% l* i, ^# J% V</body> & A9 |- [. Z7 i7 C K; ^
</html>
6 S3 T; _' e2 v8 L- N% c/ L* A- a9 y
百分比适应:2 R7 l. \5 b$ q' C
以下是引用片段：
O2 d- T2 K* i6 y7 E<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' S6 J* q) L5 B, l" C( R
<html xmlns="http://www.w3.org/1999/xhtml";>
; s, ~3 l/ @+ u2 f- r- a j, r<head> ) b8 S+ ?$ d9 p- L; q% T
<meta http-equiv="Content-Type" c /> 7 P' [! ~3 P9 y- @( h& r1 D
<title>css2.0 VS ie</title>
C; x5 L0 \8 S) J) t5 q<style type="text/css"> 8 i( [( f5 U- y' _
<!-- 2 H, [& h5 b" H/ `+ T) k
body { 3 K, |8 @; p/ w& L7 x. s( I0 L$ n6 Q
font-size: 12px; 5 t6 Q. e( e7 W- W
text-align: center; & U' k% z& l8 q7 x+ d5 s
margin: 0px;
. C+ a3 Z1 o& z; kpadding: 0px;
: v6 T, q- P, e& c" |8 Q}
2 q. u3 e! V7 u#pic{ % A. o& C$ f0 a4 T
margin:0 auto;
5 M' W2 Z$ k' _" a! s width:800px;
+ a' J7 D5 C. H) v& [+ x$ b1 n padding:0;
/ O0 u+ \* _1 \3 q border:1px solid #333;
2 _% g! D) ^4 [5 e* O8 w }
+ |' `( C% R3 v( a#pic img{ ( L L2 w) ^" z4 _+ R0 N
max-width:780px; ) x, k9 H" m4 f
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 7 p+ Z( J9 W! e7 \& q: ]" ^
border:1px dashed #000; 6 ?% n. a. e& V% x3 V$ B
}
3 V% }& A# \9 p0 z/ q2 `-->
6 H8 J/ V% L E* \) g</style>
- j5 ]4 f. t0 c6 ?3 f/ e</head>
* Z2 p" j7 j, |' z<body> & U& r P2 O% t& J6 H9 _& {. R
<div id="pic"> & p/ x7 ~* d* ?; c
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, g: C$ X0 i5 \" z3 w</div>
5 s; V# G7 M8 L) z8 I</body>
) T% u7 s" T4 y</html> |
|
发表于 2007-12-8 14:55
| 