|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) ?6 I: q2 M. `" L关键在于：max-width:780px;以及下面那行。
% w3 W! n+ s8 _; Q固定像素适应:
% U* Z5 K8 n9 ?- b1 P2 R8 o5 h @; r; D4 r
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> 以下是引用片段：( B1 Y* L+ q; v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : U2 t2 c( t2 B3 ~) [
<html xmlns="http://www.w3.org/1999/xhtml";> 2 M1 T# p# r$ Q# G
<head>
+ s; C( t0 C! }9 S) A<meta http-equiv="Content-Type" c />
) N3 U& l4 A. \4 T _1 P" Z<title>css2.0 VS ie</title> ) z9 m+ p2 C6 X3 O; q3 w8 ^
<style type="text/css">
W5 |3 ]4 ?% m( j<!-- & Q/ \# Y- a& \7 M/ @% |; D& ]
body {
& E( p+ V/ @+ ^: N& [font-size: 12px;
' e4 P) ?, {; \& jtext-align: center; ) ?3 j# u- k6 M5 u; h( d
margin: 0px; * G% E) D# @$ o
padding: 0px; - Z! B. W( |: {5 `) A! n6 }5 L
} , b( ?# P4 z5 A( j ^
#pic{ # @0 e8 n8 i& o3 U- Q* w8 u
margin:0 auto;
I2 l+ y. E, { width:800px;
9 J$ p0 u' V. x! y9 Q5 P7 B. Z: L. e padding:0;
+ A+ n. F' @ H0 k8 \' r border:1px solid #333; 5 A6 u# L% y0 d% g
}
2 ?* }! c; H2 |9 i, }#pic img{
5 l& B5 F% T3 Y4 b- ~' A! c4 f/ F max-width:780px; 1 p/ `. Q( K* x' }0 L
width:expression(document.body.clientWidth > 780? "780px": "auto" );
9 A1 j. j) H/ L z* b0 u9 `' Kborder:1px dashed #000;
" r0 J& y. T% L# b8 p$ |}
% }; |" b) e: R5 h; x- z-->
5 ]/ S4 R, J- I; b* ^</style>
; o2 U8 N" o5 k3 f8 Z# o6 d# j</head> 8 Q1 ^1 d5 U* q0 _' ?
<body>
1 Y# K7 N' F/ J" O+ U( U<div id="pic"> : c6 z- z# F$ u* M7 Q& n. M. n) ]
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 a, ?8 n# N3 U; e. }: y7 T- T: Y</div>
: ?9 V* ~) Q" X0 u- R" g</body>
& B4 ~; z9 u' ]) X* A</html> 5 t4 b4 _5 K: L. |
! {7 R" w9 D; g+ k
百分比适应:
7 p6 I! g3 H/ K, w6 l" Q4 A以下是引用片段：% c: G9 A$ `- L' R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / f/ u- ^ _# o, C
<html xmlns="http://www.w3.org/1999/xhtml";> 6 g; T, M( `8 X( o! i g- p
<head> ; W8 Z- c- I0 U1 N
<meta http-equiv="Content-Type" c /> 6 i' S6 b6 H0 ~- h3 m
<title>css2.0 VS ie</title>
& X7 |$ H: R% i9 N- T4 [7 o. u<style type="text/css"> 9 W" }) ^ R1 K& a1 l C
<!-- G: _1 a7 K% _6 |8 o
body {
- F$ B, k x; ]8 `2 Tfont-size: 12px; / S3 e, g' P$ p1 H, j
text-align: center;
: q* i/ E" u8 H5 K& ~margin: 0px;
7 i* g1 V8 L$ A. ^ rpadding: 0px; 8 ^- a1 k5 F8 B4 a4 V/ {( ^% g
} ! T, a$ z3 K+ [, o8 q
#pic{
' n* T- M; K, d) t# c7 e margin:0 auto;
L' Q# H3 ~: Z% {1 }9 z width:800px;
) u$ o4 |* i ?! U* I4 s V padding:0;
" d+ L0 K! d) z5 P4 \3 Q& R7 y0 C border:1px solid #333; 5 J- m( k5 s8 d @% T/ c" H; l
}
, g5 |4 L, r# L ~! M6 K# U( F$ K#pic img{ 5 ]' q' X( n# P, R8 ?# h
max-width:780px; ) F% R' ~$ s& ^# | L# V) u
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ; b' t. ~$ j, k5 f# K1 o
border:1px dashed #000; 7 {! Z) v0 O3 `
}
5 e' N' Z3 `% V5 B6 Q( i1 f-->
9 I) g7 o. A. e. G/ r% c- m</style> 9 Y1 N4 Y8 a$ E: H" n/ a
</head> , X- K4 s! j0 i: ?. p
<body>
& m: K" x) o7 U7 `9 T( D<div id="pic"> , ]- l6 r( n0 B) s, }" B/ P3 K
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' X3 Z2 E5 r7 T0 f: i9 A</div> & h: x0 ?" g' b
</body>
+ [+ l, H4 z. _( ~</html> |
|
发表于 2007-12-8 14:55
| 