|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14433
- 金币
- 2502
- 威望
- 1647
- 贡献
- 1450
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。0 W( m4 i, {' B+ e' Q+ ?: s
关键在于：max-width:780px;以及下面那行。) D( k7 ?* j% V( h: z( u
固定像素适应:
$ ~9 g$ `( h4 p) n& B: U, Z- \# Y% S. a; m
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> 以下是引用片段：
: l% L* g1 q- n. r$ q2 s! p; r<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& ]; `1 O7 J- a! _" e' X<html xmlns="http://www.w3.org/1999/xhtml";>
* l8 ~% v, u% I+ t. `% y( F<head>
R' |( |1 X6 \& n u<meta http-equiv="Content-Type" c /> 6 {! u3 o2 Y! F# k+ K/ @
<title>css2.0 VS ie</title>
1 H* l q8 n7 f) T) z( p9 C<style type="text/css"> 0 x: b4 a' q- Z( P
<!--
7 n8 ^: z- p3 Q% r3 ?. zbody { . U. v* F8 }8 }! k. F
font-size: 12px;
# q& m& h+ j9 V; C, u( _text-align: center;
7 b. M! @6 m9 T6 i9 g( a/ Rmargin: 0px;
* _8 A) W; l: J9 N" k Upadding: 0px;
* T" V, L$ X0 A# Y- Q/ \0 q$ l2 [) H} 6 C9 X# w! x. ^0 T6 [
#pic{
+ }( h! H+ ]9 f4 a7 G* b/ K margin:0 auto; : r. A8 w& T+ ]6 n. r1 V" _
width:800px; 2 k6 F( o: X) q. Y& e* Q6 Y# `
padding:0; 1 j: L% P* |) D
border:1px solid #333; 1 v+ d! \" Q/ x1 k2 @1 R
} % E9 j, D( u' r0 ~( w
#pic img{ 7 J( R3 w9 T% q9 h
max-width:780px;
3 b6 O3 r+ H, Ewidth:expression(document.body.clientWidth > 780? "780px": "auto" ); + p. f, z" a/ R ]' z
border:1px dashed #000;
" s6 [4 j- m, T1 B7 k}
. z" m/ x2 Q0 m) b% t- |--> 3 e2 X: r: Q: U! o( u4 s: M$ q3 }
</style> 8 l. v7 K9 j% H0 d# u
</head> 2 I1 {, G" D( p" Y) h
<body> 9 ]; f: s. P4 A
<div id="pic">
" Q2 k: |+ O' `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ ]; g3 N: {) f0 W+ k</div> ' ~& e6 k- W4 ]) D: C( H5 Q+ T
</body> 2 }* V7 o9 q, R3 u- ?
</html> 2 g; i8 e0 y' [9 P* B& S q
( K9 G: O" w/ g! `$ y! p3 N9 Q8 A
百分比适应:
) q" ?$ c1 }3 C* u* ~以下是引用片段：
% L/ V0 ?0 n& W. H) E$ `: Y& D<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> & y% q# k. W' j9 t q2 f% s
<html xmlns="http://www.w3.org/1999/xhtml";> ! t9 @( D5 J0 p" G8 W7 w/ I3 v/ s
<head> % D/ L' `4 ]; f
<meta http-equiv="Content-Type" c /> 9 J+ i' I/ J- ]: _$ U% _
<title>css2.0 VS ie</title>
! Z+ T4 r( \* a) ]<style type="text/css">
1 c$ h* s) k5 E- X& `# S: P<!-- % T: \, o# E; R2 ~. @
body {
3 r* {. d. x0 jfont-size: 12px;
4 |6 k5 p& j7 x2 @text-align: center; ' s: d4 E8 I$ B$ b( [5 {
margin: 0px;
8 q8 v- ]" X! P) bpadding: 0px;
, x: J! ~+ ~7 w( M" S}
$ j3 t* c/ P3 ]: ~8 W#pic{
* \4 I/ O0 a) r margin:0 auto;
5 ]! q' Y) H9 ?5 x f) D( o) } width:800px;
2 `0 f3 }( ~( }) n. k$ L4 f padding:0;
?$ ?' p2 c1 D" d' J border:1px solid #333; ! |5 G( R) B/ p/ a
}
8 z" z! ?- L- ~0 i5 N5 y. I2 J, P#pic img{ : Z a5 `1 T/ @; O3 Y$ S+ h
max-width:780px;
9 X7 Y2 D. L$ x+ [7 _" W; Swidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 [$ ?3 \5 F+ yborder:1px dashed #000; 3 S$ h3 t+ u& v2 I/ A
}
, l r1 y& k6 ^5 s8 v1 E& B--> . _7 Q) _9 H C. w; U! S
</style> * Z0 j0 z. r f
</head>
$ F% Y! n R( j5 D7 C: v<body> * a3 C# L. {3 M& C) z
<div id="pic">
/ |& Z8 b1 r4 X* J# ?' W<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + F! z! s4 S" k+ V$ f
</div> 3 n2 e% T' L) l# l" y
</body>
8 i8 y/ `- u" J6 S8 `5 ~</html> |
|
发表于 2007-12-8 14:55
| 