|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
} t) X* b& B; n关键在于：max-width:780px;以及下面那行。
7 q8 e- d A+ @/ r固定像素适应:
; S' k( G7 M1 w# }* Z- H
! W5 F% p- a7 V Ydotted; 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> 以下是引用片段：
8 `4 i3 ^* s" H7 f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, g7 b$ |( l8 O8 q* N7 ~2 Q, O, a- N<html xmlns="http://www.w3.org/1999/xhtml";>
% k# O" |3 @" V; P' K% m% e: @<head>
& F! n/ i6 M/ ?+ @2 s$ w$ E<meta http-equiv="Content-Type" c />
& a m2 L' k- F% J* ?<title>css2.0 VS ie</title> $ d: y; N* h" i" F& u( A$ S w3 ]% B
<style type="text/css">
7 j0 r) o7 X' t7 Z<!--
5 k5 ^9 l* u5 f- E$ @6 f$ Zbody {
_ d& V- X2 l' o( J" Sfont-size: 12px;
9 x+ L& }% T2 @% `- Xtext-align: center; 5 b6 h4 @# n! |& y; g! b* p6 F3 Q. I* ^
margin: 0px; / }' x9 n' n/ b$ P" ~- ~
padding: 0px;
5 g7 y$ x, F4 M% `- U' P: i}
0 L5 j5 X+ q4 g0 t#pic{ ( A4 d8 j q/ R- D) ^, ^
margin:0 auto; " q6 a! B' s6 P
width:800px; 0 R& A' W5 \! T" i8 p
padding:0;
9 J D% A5 R" B2 s border:1px solid #333; 7 v# D: } f/ @# L
} " f) P$ E+ l+ h* W8 |. X8 I3 K
#pic img{ . v+ N( Q) g0 z4 X8 p# _
max-width:780px; 5 Z& a4 d' Y6 ^* ]
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 4 x% v# n% _3 y& l6 N$ n1 z& Z
border:1px dashed #000; 3 ?# S) _- D) H! U2 I A
} 1 ^4 ~) _6 m, K- l/ m+ x
--> 9 d' O# `9 ?: C% h& p
</style>
3 q$ }. v0 ?) v1 B</head> 5 q7 I$ U, X! ?8 E" }3 T
<body>
0 }7 S1 \( k! ^( Z<div id="pic"> ' ]5 y9 d( q# X* i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' M) F; _6 l# X; E' p</div> 3 Q; O+ c( p, `7 d
</body>
* a2 l7 [9 B6 W* z+ M</html>
4 P1 ?# ^* h( E& X4 {6 X' j: W/ `* t3 H! U! B% X% ^) f
百分比适应:
2 @9 K+ _! X( R5 G. L以下是引用片段：
. @0 m0 k+ P2 Q: q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 |8 h) P m% q1 [2 A
<html xmlns="http://www.w3.org/1999/xhtml";> 7 H; k3 t/ s* h0 P: L P0 I
<head> 4 y0 T) \7 O& ^
<meta http-equiv="Content-Type" c /> 4 Y' S, J2 G0 ^# f) w! u
<title>css2.0 VS ie</title>
( ]3 ?+ o( h/ w" f f7 Y<style type="text/css"> . B& B. R; d' }1 G
<!-- n6 x, c$ I: ?" w' {; K# F4 M/ ?
body {
8 M6 H5 a! @! J' S8 Afont-size: 12px; 7 R: Q0 z, m, A) G# m% C. J3 H7 A
text-align: center;
' ]1 S9 R. N4 Ymargin: 0px;
' N% K1 U/ B$ B7 J3 Ypadding: 0px; " k2 p! J# ~0 J r2 `
} , o1 }1 u0 ^* f- z) T6 R
#pic{ 6 Z: M7 A6 @3 D8 e. ]4 L
margin:0 auto; % g2 C$ h! Z* u( E
width:800px;
* J* ^0 H- B3 V* s' n4 G padding:0; * G! O9 b7 u# b {! K: r+ y% J
border:1px solid #333;
& R$ s0 Y; r9 s, I4 B& g! Q }
( h4 z/ a$ y: W& m7 {- b#pic img{ & X% O) y; v/ ~% ?6 Y
max-width:780px;
6 }; B. [, q% _9 wwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : S( v. O5 r" u! W( Z4 C
border:1px dashed #000; ' `4 s, T, n P& D* f" ?
} # v$ F: N! {1 w( Q
-->
$ B, J# Q2 M1 O6 M4 m! l6 @</style>
, a, Q& q" J$ Y7 H</head>
" Y; y T. U' i% O<body>
' m' n# V0 ?8 {6 s m$ h" \<div id="pic"> 1 L: ~+ p9 \) |) m: H) I" B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 z! ?% K+ p1 T$ L7 z1 Y- Z/ m
</div>
; Z9 @, y, I G/ I6 k4 N</body> . l, h a5 x( r4 b7 ~9 t" H, |
</html> |
|
发表于 2007-12-8 14:55
| 