|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14399
- 金币
- 2485
- 威望
- 1647
- 贡献
- 1433
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! l4 [. S* h/ Z- ^关键在于：max-width:780px;以及下面那行。
, B, Q' ^8 g: S固定像素适应:
3 b6 W; T! s0 B( b3 a* a
+ ?* L# b* U3 t* ]5 P) k) q$ Rdotted; 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> 以下是引用片段：
, I' N- `- m5 I I/ g9 Q" f3 H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% ?. v- g- }7 T0 w) L<html xmlns="http://www.w3.org/1999/xhtml";> . T6 R' \! A. u$ X/ }, C" q4 s
<head> 7 z4 X' L* W/ u6 k- }) h
<meta http-equiv="Content-Type" c />
5 W6 } x. B3 v& t; S1 [<title>css2.0 VS ie</title> ) Q2 x: A9 o$ q* m/ O6 f9 e
<style type="text/css"> 8 T% w) t0 x7 h
<!--
5 D4 g, _( L) [& P; p \# zbody { 1 g, x; b" p \
font-size: 12px; , T. J8 ^ R9 w* I# q! _3 ^; Z
text-align: center;
2 I7 e+ g( i7 S* s7 Emargin: 0px; - z0 e' f0 F/ X
padding: 0px;
3 C: r7 n9 M; O' k9 k, E9 o; ^8 J! o}
5 s; T4 t9 O+ s' O#pic{ & k' @4 u0 I! o6 U
margin:0 auto;
. V4 x' U7 q4 O4 u' d. s: k. e9 m; Q width:800px;
* e+ e; u {$ b6 p& k padding:0; 6 w, u; x. p; B. ~: M0 {
border:1px solid #333; % c7 S. Z5 P" {* v9 ~
}
$ p. v: F) O" [! w#pic img{ , V7 q( r0 _. z9 C: v
max-width:780px; 8 o! m! Y# H" w5 i" I' u5 ~: c. M
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ ~* h' S7 p, x- F4 c6 X% u) gborder:1px dashed #000;
# S8 V$ _! V2 k}
/ O0 k- B8 i0 M( g o0 Q--> $ M* a; R3 `- D
</style> * W9 {' I" f0 A3 V& H+ c
</head>
" O: U9 p; u9 v8 `+ m1 g<body> * }# `! y3 n! r& `
<div id="pic"> 9 S* E; f p& }. a5 B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; e2 l8 p- D' V# F$ p, H' q</div> 6 O$ ` o" _. m" {, @9 b) Z
</body>
6 _# r7 S' _7 S/ q! @3 m' D! I% ^7 e; x</html> 6 ?! B- q! }) E6 W7 d: X; R
4 f T2 x0 A' z; ~. J2 F
百分比适应:
! a ?- [) x S2 Y以下是引用片段：* q6 B+ ], \; o3 h& f* D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / A5 S) L* w4 d- J
<html xmlns="http://www.w3.org/1999/xhtml";>
" g0 U$ c6 g. ~' r3 ]! ~) x! @! S: g<head>
6 i- Y* ~8 T l2 U! v" j% Z) [% c- e<meta http-equiv="Content-Type" c /> + ~( Q6 a1 a ^, W3 b# V/ z' [5 ]5 i3 H) |7 H
<title>css2.0 VS ie</title>
! P- v0 O5 @0 P y8 j0 H4 l0 [<style type="text/css"> * {0 z# t' }3 T' E6 N7 e
<!--
, Q+ H% ^/ g- S# Y* i, b* M1 z& Y" rbody { % y2 C; K. U5 c6 d7 \- u
font-size: 12px; 4 t x7 E4 o, w! B. b4 V9 ^9 ], ?
text-align: center;
^4 T& T6 ~. o9 G/ Y }/ J" m u* i0 hmargin: 0px;
: P5 ]; ]: P5 N( V8 w: p6 {padding: 0px; 1 F9 A/ ^# K& Y$ d" f: Z; M: N2 A- ~6 m
}
: p5 x1 r, m+ |' n- e#pic{
8 L$ N; F: T! O+ w- @ margin:0 auto;
0 C M3 w2 |9 q- q2 t5 Q width:800px;
6 ?: Q C5 @; [1 S) L1 u4 [ padding:0;
; b3 n! v2 [& h. p border:1px solid #333;
5 l/ ] n# w5 E5 T2 P M } 4 T# p( p8 d; j7 T
#pic img{
0 ~: O5 P! b4 H2 l9 }7 c5 ?+ H max-width:780px; 4 O+ `) h3 M- l
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& ^( N9 C u, xborder:1px dashed #000;
7 t3 v! W R7 g% A% h}
+ R8 \6 L2 l4 L--> 3 ^5 H( q" D" f" ]1 b1 l
</style>
8 J6 e x) X* Z: [7 x</head>
, M; S9 o7 e& C5 p<body> ' S5 S0 N; h9 {) a7 V
<div id="pic"> 6 q1 J: M! A/ ]5 x! }, _7 O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 N, a/ \ @& o
</div> + W8 W# K- d2 f$ F% c
</body> 8 B+ I8 z& K! v; z7 M, j8 [ ]$ u
</html> |
|
发表于 2007-12-8 14:55
| 