|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14327
- 金币
- 2449
- 威望
- 1647
- 贡献
- 1397
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 Y0 B o. b z; ]( N! f7 k& f$ T关键在于：max-width:780px;以及下面那行。
1 I3 C* V# z9 s固定像素适应:& b* X( T; _" K. f
+ ]5 X" ^) B5 Y' v9 E8 Y- D
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> 以下是引用片段：4 n9 _) B, s2 n/ {! {: U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* ?7 L4 c; {' G& S<html xmlns="http://www.w3.org/1999/xhtml";>
/ P7 ~$ A: P6 E ]# @" P: i<head> 1 n) {* Z u+ C' V1 a
<meta http-equiv="Content-Type" c />
1 u+ t$ {( b2 g9 N# ^% A<title>css2.0 VS ie</title>
7 N( l- ~3 V" X: G<style type="text/css">
! I+ X8 A$ q; _4 R5 K6 e<!-- 3 V" [# M; @5 G. C, [; i" j
body { ' Y6 U: l7 J |3 ^$ F- b1 G" L
font-size: 12px; # p; y& t. {4 k+ s) A
text-align: center;
5 Z) K. q' r' ?$ xmargin: 0px;
( l" P& \4 N2 H4 _8 wpadding: 0px;
& x( z! L2 x4 W" U} # Q6 w2 |) ^* \% I$ H# U0 u+ W) s1 m6 Q
#pic{ 7 G/ H( A2 M r# |, S; z- z
margin:0 auto;
k- p# r4 t( r3 b, m: m9 A2 e; b width:800px;
7 o; D# l( Z/ g% u9 d( f! L! K padding:0; M) h$ g" S8 f. z9 `
border:1px solid #333;
8 ]) v2 X# r2 x, i, q9 m; f }
( n6 C3 Y! I2 ^. t+ Z) ^" q* g; g#pic img{
) y( E4 C% Y" \ max-width:780px;
8 v* `4 @) K6 e! ]9 hwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
' q& p6 \7 } d- ~0 uborder:1px dashed #000; 4 I g( I$ o$ a9 y$ I/ j
} : H$ W+ w+ U$ s [4 R* _! x- q" }
-->
: e7 J/ _/ h0 l8 J: I& Z2 b</style> : g0 V3 X$ ^' u7 E
</head>
4 W- F. V k' A. ?<body>
! @" q3 \& B& u# u5 L<div id="pic">
% d1 s* E, d5 H9 Q* P& E# o<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ L& Z$ t X a+ S2 B. r: b
</div> |$ ~3 w8 V* n9 R. F! b( L* U2 e4 x: u
</body> & A+ l) L5 c6 f6 F0 b0 u. b
</html>
' T% F" }+ Y) V
6 [; T6 ?& u! b5 S* w ]3 ^百分比适应:
8 M8 \% k; l0 R3 @9 R7 M/ G; z以下是引用片段：1 V9 Y+ C9 @( ?; N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ \8 f9 J% h: Q2 [; D% T/ ]* s% |<html xmlns="http://www.w3.org/1999/xhtml";> " Z4 z) f- ^. R" N
<head>
- P1 h6 ^1 t' v' \1 k T- ]: P& f<meta http-equiv="Content-Type" c /> 8 Y, e( D. C# ^2 ] @ q% q3 a
<title>css2.0 VS ie</title>
* \- X* y# F# \- R# M<style type="text/css"> " k. _% ]. B3 N1 I3 n9 x2 T+ X
<!--
$ ^' t2 n3 M! z+ ?body {
: ? D/ {* }) D2 c; K% hfont-size: 12px; ) R: t$ ]) {, o7 v( j9 k; R
text-align: center; 4 w' M% u, x2 q$ o- k
margin: 0px;
7 `' x, ]/ Z# R( M6 cpadding: 0px;
( @4 W% D# Q4 x- M5 W. x/ G$ C}
0 x0 r: G, N' H#pic{ 6 u* h- G+ h& I* q9 p3 o/ B' e
margin:0 auto;
! Q- A0 S5 J4 C! ]* [+ B! a width:800px; % Q& Z3 C! t% u/ Q0 C& s; R
padding:0; 5 e6 L. F( c6 L! E8 e0 @
border:1px solid #333;
7 P2 T+ [# ? ?" s }
, B( C5 n8 H, Y6 \#pic img{
: g. n6 N. E4 c' J! K max-width:780px;
' M4 ~! `) Y0 {0 C4 Z- m Ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 r+ Z% ^1 x7 |( [border:1px dashed #000;
3 ?7 Y9 W* {. K" M0 N* \. B0 ]}
! f2 `% W$ L% w% C. o& a$ C7 W-->
# p3 g' f( y7 s, y, b$ \</style>
5 P1 W+ |1 @. `; _" ]</head> 4 K# j7 B$ n( ]% J6 o
<body>
2 N3 {3 X* L9 C+ x<div id="pic"> : G7 Y: K0 k8 `2 H) ^# U1 Z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ Z# G! W) v6 l, K3 ` O4 u/ D</div>
( H) U+ S0 Z. ^* g* R( f</body> ' X2 o, n) D8 c6 H$ c* @9 Z$ @$ K }
</html> |
|
发表于 2007-12-8 14:55
| 