|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 }$ l# T( `4 d q8 N% D2 G) E
关键在于：max-width:780px;以及下面那行。$ L: N- f. p: J2 R3 @# q
固定像素适应:% J0 F. [2 S/ s: d- P- `& L% X( O7 z
. I% T F% }9 @0 ndotted; 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> 以下是引用片段：
, }' E6 s+ B( h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ t7 V* R; p6 _- T# d; h$ {<html xmlns="http://www.w3.org/1999/xhtml";> % h' y5 o9 n. Q7 ~7 p
<head>
: |* Z+ U" Y# b1 L2 Y# ]<meta http-equiv="Content-Type" c />
: j# w& S4 ^6 G( L7 v% x8 J, v4 [. Q<title>css2.0 VS ie</title> . O4 o( m, B# v
<style type="text/css"> ) s' Z6 n2 {" f. C
<!--
# L# ?: y1 I- Pbody {
% e6 a1 N0 X0 g) xfont-size: 12px;
9 \2 s& m* E2 K$ B: rtext-align: center;
5 h) w. L2 p* y) ~margin: 0px;
( t/ L# e! p* G4 o/ L/ ?padding: 0px;
6 _- x" J) a$ M* R: m5 C8 R" j} " p4 u( v9 ~8 X, j5 u: q- w
#pic{
6 N9 @6 e: Y4 z0 c: F margin:0 auto; ! H. a- N8 ?$ b2 T
width:800px;
$ a! d4 T: `$ N, v# P padding:0;
6 C3 g d9 x& l* ~( ~# Q. }( e border:1px solid #333;
+ G0 s$ y( Y6 J1 o( W% N } 7 v2 r2 K. f8 | w$ G
#pic img{
8 {; |# D% t! j a, n O, }/ U max-width:780px;
* }) J5 a7 S( A+ p) m1 cwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ; p" l9 q& j% |; m8 ?( M$ C
border:1px dashed #000;
6 p& }1 _" `2 a4 o- z, s' E6 W} / h$ M }" s: f+ h( y7 ~
--> ; O0 E# R/ X% m( B. k: E# @$ A3 I; Y
</style>
3 A9 A, w- k: z7 N</head>
Q0 |, P% L% Z+ y$ H T z" q$ a<body>
; D5 d% z) ~( V; ~4 c" P<div id="pic">
" T, t; [ ^! A' [( A. }- U) [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + `( Z/ k. o6 Z. c
</div> ) {6 }4 J$ o" o- V, c+ c& B
</body> + L' P7 s/ ~# K- L; ?& i5 @" I4 D
</html> # L. z& c. N4 `2 C0 b# t! L% x3 i+ d
( z. k2 l5 t$ }
百分比适应:( j1 K z6 j- [$ T
以下是引用片段：% ]8 V4 |6 m% d- u
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 e, t! [: j1 p* {% a0 Q$ O<html xmlns="http://www.w3.org/1999/xhtml";> . C" j7 b6 c8 ]4 h) N9 D& m( P3 Q
<head>
. J* |7 O4 {# r& ^3 Q% O<meta http-equiv="Content-Type" c /> " B3 X" Z+ P8 A" O: U- o' _, ^( H
<title>css2.0 VS ie</title>
" z4 [5 I/ s. C; _5 M/ j/ `<style type="text/css"> 8 d4 c$ ?# v; N( G2 m
<!-- + f. a5 x' j1 j. s: h) S! b( _- \4 C
body {
/ E0 r/ j+ {- l$ ^+ ofont-size: 12px; 7 e, k' `. {" k/ c3 A1 q9 [, v
text-align: center; $ f: n$ _9 z/ v/ ^( j( O6 y% {
margin: 0px; 8 b7 @- r. l+ Y6 \4 B' h
padding: 0px; 3 N" ]5 j6 N( {" E, s2 d
} 4 D( V, \5 a! n) |$ t! q( N, m5 k6 w1 l
#pic{
: O: r- A8 R! {$ G6 j margin:0 auto; 9 E. {4 i- d& J% N1 h
width:800px; 2 M( a- P1 Q+ _3 O; b9 b
padding:0; ( I/ ]- J3 {7 S9 W( h$ ]! B1 }" I1 o
border:1px solid #333;
# Z, R, d' Y3 G* d+ b" M4 m } 1 ]/ r3 g! a3 a v: Z. v# H
#pic img{
6 h% b5 M! S3 O3 I. M3 ] max-width:780px;
0 I# W: i; l# P- [ X6 mwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , ~3 J: B6 n! T
border:1px dashed #000; 0 h& @ b% Q8 F: D) J
} / O0 A7 T/ O6 r5 U
--> " }. l$ Z! A4 W$ D! N
</style>
& ^* v, l' B. L" T" B7 `0 n</head>
0 t4 f1 D8 W O$ m3 j<body> ) l* d' {! k) u3 U
<div id="pic"> 7 P/ k7 s7 K* U8 F8 r$ e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % r9 P3 q* C3 o8 S
</div>
3 H$ U) t- J* d& Z: T0 r</body> : V# O! ]) |; R
</html> |
|
发表于 2007-12-8 14:55
| 