|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% T2 n- Z' i8 T v
关键在于：max-width:780px;以及下面那行。6 y( o n E- y# p! m- t; L& @
固定像素适应:3 y. I- A3 I# L& @& G0 U$ _$ m
. z: w. O# k( z) x
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> 以下是引用片段：+ m5 q7 l# a6 O! i! _( Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 b$ l; I% G% e
<html xmlns="http://www.w3.org/1999/xhtml";> 9 v) Y$ L7 o" r) Z1 l
<head> ' G8 \! S3 _% j+ v( Q/ J
<meta http-equiv="Content-Type" c /> 4 p9 A6 \0 @ {0 k4 Y! V
<title>css2.0 VS ie</title>
. v( x5 S+ B8 E; u2 L5 R<style type="text/css">
2 N: \* c0 g% O<!-- & k; L7 c4 Y: I8 U
body {
. f! A2 y. K; r# E& o, F& ?1 Kfont-size: 12px;
# E: u+ C0 `0 B- r! k/ {# ktext-align: center;
! o6 _% n9 a ^: f8 d; omargin: 0px;
/ v q v9 t& l1 C9 [. {" rpadding: 0px; ( k. X% M7 T+ K
}
) [4 P" H' y$ g% ]+ ?#pic{ . \& k' y0 H0 O
margin:0 auto;
# E0 j+ H. D7 m width:800px; " P0 H% v/ u. {$ I& A: S
padding:0; ( R# ^: C/ p5 M( G, ?' v* Z# ~
border:1px solid #333; 2 B# }! u9 s# v% _6 t$ C2 L
}
6 |9 b( A0 m ?. b+ [7 M" L- N#pic img{ ' j% K; B" j2 Z ?" P
max-width:780px; " I3 f9 ]) m6 Y' S" V7 A
width:expression(document.body.clientWidth > 780? "780px": "auto" );
) J; K( K+ K1 m! z6 Qborder:1px dashed #000; & _& d- ~. L' T4 b2 D }$ r& c; p
} # Q! j" M F8 ~8 i! g
--> & `4 z E% i' B
</style>
/ o I% I' p' C9 a$ D2 a</head>
: O U2 o& d& U) q& X6 v( G4 L<body> 6 x, }$ B" {( S0 A" D8 J% F$ M
<div id="pic">
8 u/ Q! ]4 H3 i, p( H<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 _: M2 |, }0 z
</div> " p# @2 N2 Y, i o; ], V
</body> ' L" e, D" ]- I0 Z# W7 l! o' Y' Q9 x
</html> - [. k1 @7 T. _1 ~
; Q/ [ a6 G# G& \9 E2 q( q* L9 s百分比适应:/ d/ e) k0 M/ _1 X; a0 c
以下是引用片段：
* W' u4 \3 M6 O<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ ~" w3 b8 a3 {/ j- z5 ~; T
<html xmlns="http://www.w3.org/1999/xhtml";> - J: c: _" V$ S# |6 K5 m
<head> 9 w) H' U& O4 A% Q- d: s* m, P
<meta http-equiv="Content-Type" c />
2 ?! }2 V) r2 \$ U' ^5 V- B<title>css2.0 VS ie</title>
2 i) G5 N" _ k0 Z% j, r1 q<style type="text/css">
6 [7 P# U! C2 g2 g: p<!--
9 x# ?* a5 a: m/ e" R" }4 p; Q' j9 Pbody { ; i& j1 g8 C! q0 Z: F, N2 v3 D1 L) D9 h
font-size: 12px; 1 U4 l3 x5 T6 d8 E: z
text-align: center; K; _. w! `' @; l4 \4 ~
margin: 0px;
0 y! d9 m! X* L, Q! Qpadding: 0px;
5 v* J' h. l* C& o} 3 i8 F; L; F7 ^9 k. J
#pic{
. M# Z5 I- u; o: p! n( {" O8 s& O6 B margin:0 auto; 4 i, s: I9 k+ {& Z
width:800px;
' a- D" D W9 n- c q V9 z padding:0; 7 |# ~/ J1 [" J2 F- H5 K
border:1px solid #333;
3 l& [$ M' S, O6 ^! @ } 8 {$ y: x- [+ Q4 r9 _+ \
#pic img{ 2 V4 _; ?, K+ N G4 d0 t/ @
max-width:780px;
; I2 S" M# n; [% ywidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 _8 A, G$ }$ s8 `border:1px dashed #000;
" }/ i" ~6 q1 C- H* ]8 [/ c. P7 _; R} / C# S$ w9 F3 b+ X: x
--> ! b* e1 r$ c7 M S! S* ?6 A
</style> / b' X4 @( G! S7 Y
</head>
0 a2 g- @: K( v8 j2 J<body>
5 G+ D' O2 [6 G3 z7 ~) ?' f<div id="pic">
4 O8 ]% A6 m4 R8 V) r<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, q( p/ M9 j* k5 x" X' q8 I3 ~</div>
* q6 I' Q/ j$ c' A% o' R5 X</body> ( o6 {/ \* P f
</html> |
|
发表于 2007-12-8 14:55
| 