|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14411
- 金币
- 2491
- 威望
- 1647
- 贡献
- 1439
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 [4 r: d8 Y: w8 G关键在于：max-width:780px;以及下面那行。
. r4 T \3 W) e6 |9 ~固定像素适应:* i8 r0 Z! C# E0 A" v2 e7 S% h# c
" ?& J, _" y( y$ R$ A+ E J( k
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> 以下是引用片段：
# N/ Z$ }( ?3 t) U2 \& P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# G8 a9 N8 h* P! J; X<html xmlns="http://www.w3.org/1999/xhtml";> * U/ l* J; Q* f7 M+ p+ M S
<head> " n/ x* E3 O* L; g
<meta http-equiv="Content-Type" c />
/ t( q; q# _) m3 b% K, {<title>css2.0 VS ie</title>
. H, {$ J3 u8 ^6 L; Z<style type="text/css">
. L9 u2 P/ v% z3 H, g( D& I& B<!--
$ V4 e0 z, h E+ [+ Q. Obody {
- Q/ E5 k; a; o3 T$ D; q, _font-size: 12px; 0 A+ D. W: r) x
text-align: center; 3 G/ E& X: b5 J% E2 ^6 {
margin: 0px;
; R( T3 Z4 b5 c* y6 _ Ppadding: 0px; - F5 m" E) w' N
} 2 j7 V _# @# J; y( e
#pic{
* N" ^. Y6 }$ o+ i/ d! r* }% ?! u* } margin:0 auto; + o3 Q0 R: Y, j8 w" z
width:800px;
! ?2 G0 S* A1 A8 T! ^+ f3 n padding:0; & n0 r' u* U1 A% d' z
border:1px solid #333; # `/ D0 D! v" T
}
9 O$ h; h# k; X8 j* `9 ~# M#pic img{
) @9 R4 @5 _9 g) l max-width:780px;
% L; e1 z. |( ]% }width:expression(document.body.clientWidth > 780? "780px": "auto" ); ) H' l- J" T- ~! [
border:1px dashed #000;
; ~& N) l- I# S# I5 p- Z} : X" u% [3 r2 U4 X5 t
-->
) }: g0 ~. ]7 E: o3 S</style> . g1 z4 Q% G+ L2 ?9 L5 I7 d: ^* E
</head>
5 j' k( x% G8 V: D9 f8 }" z* p<body> 0 R3 g. }# r: c% Z% v- \2 l% h
<div id="pic"> % k6 z U6 b4 h: a
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + H+ S% v! |/ ]6 x9 c# s
</div>
* c5 D/ j: S p</body>
' Z( I/ b$ `; j: X9 f: `7 v$ x</html>
3 b4 _3 Z0 k5 V3 ]9 x, @% g1 \- P
* E% u. u9 K& a' E. M百分比适应:
. _. }+ N! p2 E; z( y, Y7 M以下是引用片段：) b- A# u0 q( F V0 @6 k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 w+ ?5 h7 P: }; B<html xmlns="http://www.w3.org/1999/xhtml";> $ v+ B. a: [( Y; A* P# M2 X2 m
<head>
b: V) a+ Y3 q; ~9 N% d' s$ M6 w$ _<meta http-equiv="Content-Type" c /> & w' d& x' k, y. A
<title>css2.0 VS ie</title> 7 D* S; Y8 W6 D
<style type="text/css">
% M ~# b* r+ A! K# d* Z. P, ]<!-- # |( N9 g$ L& M( {
body {
/ J/ X% p7 d. y: d8 i$ g E7 _! ^( bfont-size: 12px; " M9 I) s; ]% \1 ]' M6 b
text-align: center; / w1 K+ @8 j. ]* H
margin: 0px;
; c4 @ I" D% Q$ O$ l, D, |padding: 0px;
}& H; r/ p$ z, b) Q} 9 g; s$ E9 j6 i" S
#pic{
) a# }$ e/ i3 l; Y+ g4 d margin:0 auto;
: q, M& N. j/ W& `6 t width:800px;
7 D8 e+ o1 W, u, K% f4 O padding:0;
+ s" [, l! X: d$ I border:1px solid #333; . p, B8 I9 S1 D
}
0 [4 b) i3 ~2 e3 O5 Q. K# Z#pic img{ 4 g% U0 u3 X; m$ z# A
max-width:780px; 0 H2 m- s, n1 C3 F
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 Q* m# P5 r, A0 U. j
border:1px dashed #000; 8 _ W! z# R9 g' ]5 R
}
5 ]3 h9 R' M% Z" x( g/ i. @--> 4 M8 x' W; K- I/ X- V! h" B* q, N
</style> 1 a( d; u7 e; S+ G7 A2 _
</head> ' s9 a) z7 Y, _; Q9 i* s% D
<body> : h) ]/ y/ F2 C. B/ ]8 ~5 `
<div id="pic">
) ], E2 J4 E, \+ \4 O+ S<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 w% D' M& F! ?) s/ B3 S</div> 5 c8 V% K7 B: f$ z4 | t
</body> % b# c7 e- M! c& c
</html> |
|
发表于 2007-12-8 14:55
| 