|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! x3 b# A g( |5 `! K( ^
关键在于：max-width:780px;以及下面那行。
6 `$ m- A% S' s1 y; ]2 ]固定像素适应:
4 ?8 C! X x6 x1 |
$ }5 B/ N R4 x/ m1 f- l; F: _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> 以下是引用片段：( g" U( L1 t6 Z C$ }, L! Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- d7 S+ ^3 b$ Y! W6 R S4 g<html xmlns="http://www.w3.org/1999/xhtml";> 9 Z3 |1 c9 T$ w; \5 o
<head> 4 q% |5 q4 D& J$ i, R
<meta http-equiv="Content-Type" c /> ( E+ W. S. Z; N- O
<title>css2.0 VS ie</title>
; z+ w/ S3 P4 f. U<style type="text/css">
) j- `; Z n, z1 |' C8 x- J<!--
+ t. b8 h. ^! p3 Obody { 6 ~6 T3 K8 g3 a' k1 t' u, ~
font-size: 12px;
' H/ Q& I9 j8 h1 p& K. `text-align: center; # X) G G: D _6 z6 j: x
margin: 0px;
" c2 T/ E# L2 A% Q& Q" |! U; I' D# Fpadding: 0px; ( ]; ]1 \% ^7 ]# p! z: n
}
2 c0 S7 w1 F9 G0 t% N/ I/ M#pic{
% J# T, O( r W9 Q: [* C5 h margin:0 auto;
8 b; s# _+ l. n1 L; i- l G+ ~* p width:800px;
# c. C! E8 d8 ]$ d, ~8 z padding:0;
f, {, R$ u1 W border:1px solid #333;
9 D- `; w4 R+ A8 X# j% ^ } 6 {9 F2 f; v A0 Z1 e
#pic img{ n2 U9 U! P5 \' _
max-width:780px;
+ p0 N4 l8 C4 e. x+ c' Bwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
$ R$ L- l) C3 O6 aborder:1px dashed #000;
) N; T& ~; P, |6 Y" u}
. x8 y+ {- o, g1 ? m8 _+ y8 M--> / g3 J3 u4 R# n/ [
</style> ) Z5 j& f' a$ _) O
</head> ' S5 R N( z3 e/ ?
<body> 7 b; X" k& l7 J% t
<div id="pic">
3 N* H& w7 P, v4 P5 w v6 f0 Z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 T7 B. r. m5 [& y+ g% J& L: I</div> . }* s) n0 B. B" O3 t, y
</body>
" _' L% j: G" ?$ @* \</html> ; V8 Z% B {: F9 D5 D: c
3 W. c9 v+ H! P. @+ \; U
百分比适应:
" |7 b, D% R* B9 x( I( ^以下是引用片段：/ Q) n+ ?0 n, |0 @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 v% z5 e+ l# D9 G, K' C5 W
<html xmlns="http://www.w3.org/1999/xhtml";> 9 F0 Z7 @3 \6 r+ j# @
<head>
3 T& \9 D& b1 m2 O3 B/ x, H: M Q1 N<meta http-equiv="Content-Type" c />
8 ?+ Q! V9 n1 [4 D4 `<title>css2.0 VS ie</title> / q: N% m* j- {0 K O$ X
<style type="text/css"> 7 N' y( {; v+ Z, G* i+ L8 b8 q; ]
<!-- * c3 C9 D4 A: t7 p
body { 3 T- m) n2 a& T, A/ P2 L) v5 }
font-size: 12px; 4 ]' Q+ j3 u# u' e: t0 s5 b
text-align: center; & a% i7 J) T8 y1 t) J9 W7 b$ Y
margin: 0px; * i2 r$ E- R5 J ~- M
padding: 0px; . k+ ^+ U" K! E: B! D: {' k: F$ S
}
" K* l; ?0 h: p#pic{
' Z' F7 h: y5 s B margin:0 auto;
( I: n( F6 {* p% t6 v0 k' ] width:800px;
1 k* @; f- d+ S3 N/ U7 O padding:0;
! M$ |1 f7 x2 e2 q border:1px solid #333;
- ?7 A( i5 j5 l. Z# q/ w+ b } 5 h! L/ L0 D* I7 \& Y) W
#pic img{
" {- u2 P1 F2 x/ L% y5 l: t0 O, x max-width:780px;
* n$ l& W; J) Pwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ! b% r! _ k. Y
border:1px dashed #000;
! c% H, Y, r! j} " a1 w, T0 b& k, E, a7 A7 y
-->
/ _- q8 C, |0 u1 v% H2 p7 v9 Y7 k</style>
f) ^- r A( Z' J2 S2 @</head> % a' l. g% R5 @% E* w, `% m
<body> ) h- _3 w( ~: c! ^0 d# \" x+ F
<div id="pic">
+ a( m- f7 A. |) q! y) D<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 s+ W6 y7 y3 n7 N* @" ^</div>
# u7 v/ O5 C# Z2 S</body> 3 S3 D& l4 T; c( \5 X! N5 Y9 ^
</html> |
|
发表于 2007-12-8 14:55
| 