|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: J; F7 e) [, d2 C3 d关键在于：max-width:780px;以及下面那行。
2 g' {+ p7 p- \# w# d( F% U1 F固定像素适应:5 U' J+ t1 A4 v. B1 U* @% i& _
0 w$ ^& c7 M0 I" @$ g$ W
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> 以下是引用片段：! V5 @$ B( g1 g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 w" `' V4 W9 s2 m- i) S8 j<html xmlns="http://www.w3.org/1999/xhtml";>
; |4 A$ I! [( N) n+ n% S8 J9 |<head>
! l/ M/ P& X0 U; n7 B<meta http-equiv="Content-Type" c />
) {3 h( @& F" X v% G<title>css2.0 VS ie</title>
' j5 Y# ^/ c" h L& f<style type="text/css"> h% u4 B! l" n, \! q
<!-- 8 z3 w6 F6 Y7 ^6 c' i' C/ @
body {
! p9 T0 |4 l% l5 Gfont-size: 12px;
% p& C: j' t; ^' h5 Ztext-align: center;
; K8 Q, a b c+ z6 f: G3 m9 Emargin: 0px;
, \5 n' o; ~6 @( ]3 b" G0 xpadding: 0px; $ M! j2 Q; f: g- X1 T* }5 Q. k
}
9 l" n; j+ y0 E$ F$ \; z$ |. J* S7 N# G#pic{
) w0 k& f9 ]) J2 n( Q margin:0 auto;
8 m- @2 [8 ^3 b4 [9 w1 c" R width:800px; 0 E6 p8 s/ ]3 a4 B$ O! L0 t9 {% c$ s2 i) i
padding:0; 3 h& R. z* ?& ]: m
border:1px solid #333;
/ x/ u6 R) Y. S* `9 N }
+ C: E8 ^4 X, L& C% t/ s7 p! _) i5 P#pic img{ 2 `5 v6 V! g% L
max-width:780px;
! {# M2 b. ?! cwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ' F% I$ b" q) |8 P9 {6 v3 J
border:1px dashed #000; 5 c; U# z; r+ [/ U. y- Q% @
}
; d; S/ m6 k( y, ^& g( R* o, R" e-->
$ D8 @+ T5 {! X4 g) T) Z$ D</style> / h7 L" o3 O8 t
</head>
& C; n5 K* i$ m p! ?% @<body>
8 J" o6 G4 z; F. M A<div id="pic">
7 L) a4 E0 [: {: T! r<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' m: @4 H8 D( E w( z' N9 ~) k
</div> s# ^7 V% ^7 [
</body> / S$ B9 D9 {9 G0 k" c5 Z
</html>
/ c: w, g' j# Z" W" y( s7 t0 u0 a3 V2 S; u% F4 M5 y
百分比适应:/ x! R& r. @) k5 m# z! e
以下是引用片段：* X/ l5 D' r5 W* k# M3 T6 {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 C$ K) w G1 ?6 r" \; ^
<html xmlns="http://www.w3.org/1999/xhtml";>
2 G* M& P% S0 A0 q: R3 Z, F6 ~<head> & H. E4 U1 B( T; s6 W
<meta http-equiv="Content-Type" c />
/ I% b. G1 _3 C. Q, {1 f1 }9 X5 n<title>css2.0 VS ie</title>
% `) ?3 g/ U5 m) w1 p<style type="text/css">
1 E' ^2 S2 e% D; M& e<!-- R, s7 N0 e+ ^* d
body { " D$ k( K7 X% F( I* c; V1 e k0 E
font-size: 12px;
6 _: L- _' e# p/ [) g( I% c) O% btext-align: center; + I: b# v% h- u2 N( R9 d, k" U
margin: 0px;
5 H# Z( Q$ ^% T) F8 \) Upadding: 0px; $ z- j) ~# t5 k1 i2 n7 p& |
}
' D! E5 H) W5 F0 E#pic{ 4 q9 ?* |8 h& Z% ~) I
margin:0 auto; ( Z7 M' s/ ?6 I4 B& V+ ?
width:800px; 7 Y1 ~6 p1 ^& Z( x% q: ^% S
padding:0;
9 s% n# H4 Q8 |, {/ U }* D% v8 S border:1px solid #333; ! J2 Q% ~. s4 F1 ?+ y9 \
}
! M& a* @- K+ J( a$ m& ~, G6 b#pic img{ ( S8 ]( M* C# _* R# x% \
max-width:780px; & k- A1 ~; a) N4 @; B6 x0 h4 `; A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 5 U9 W3 {: h3 m
border:1px dashed #000; 6 I' y; c$ K# s- w8 U1 h' f
} 5 |4 x3 G- v% u ?; ]
-->
. L; o& S% _$ Y8 D u. j</style> : |4 ^2 F3 h- p- H" {9 ? @
</head> 7 l1 h* W! n' I$ X5 J& X- n
<body> & X2 j+ r* i) Y% m! R0 ]) h* S
<div id="pic">
6 m7 ^3 ?0 Z: f* s4 B1 Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 l- g6 k2 ^ k3 h7 ?
</div>
5 v+ F; n1 F: l9 Z7 z3 ^+ r' V% E</body>
- c ~- V* S( f+ K2 w</html> |
|
发表于 2007-12-8 14:55
| 