|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14239
- 金币
- 2410
- 威望
- 1647
- 贡献
- 1358
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 W/ q4 s9 w; W1 D; b4 c关键在于：max-width:780px;以及下面那行。- n1 b W: {# w1 E7 I- O
固定像素适应:
1 W$ L) n F9 t6 S7 W$ Q
9 F$ x7 u2 I7 ^! }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> 以下是引用片段：& j2 B0 s9 p( A/ K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ O2 m& ~+ _* r1 @
<html xmlns="http://www.w3.org/1999/xhtml";>
: @3 g& G5 X$ Y/ F9 D/ {<head>
. K9 }+ U( ]9 a4 C<meta http-equiv="Content-Type" c />
$ W! k& {. n) p- b: i1 f<title>css2.0 VS ie</title> # Y9 O& X/ U5 d6 Y
<style type="text/css"> 7 P! a; @9 P- r$ @
<!-- # L. s b D, z( V u- O
body { ' ^# n h$ O/ J5 j8 W- ^/ n
font-size: 12px; / o2 Y! O1 L5 x& v- y3 z" f" y1 [
text-align: center;
- X0 N( Q: T$ d; l! w$ B# N% a! mmargin: 0px; / m! ^9 h: Z7 u3 K
padding: 0px; ' E- P# T n2 e& N- k) o4 J
}
$ m. _; G* L2 a9 q% @6 u) E6 a#pic{ ; C; s4 ]; y J* k
margin:0 auto; $ u- c5 A5 P1 n8 y& s7 d
width:800px;
k) p0 b1 A& Q; h8 k! j1 G+ I& d padding:0;
9 |* w" J& j3 F* A. n g border:1px solid #333; 5 I" \) U0 t) Y" ?$ z
} - L2 v# K2 ~3 j' t, h
#pic img{
$ q" d8 u1 k' T! h: l max-width:780px;
- }+ E* U0 n* J. [width:expression(document.body.clientWidth > 780? "780px": "auto" ); & A; @8 J2 {1 C/ g. p9 i" A" }* }
border:1px dashed #000; 1 K# l# x7 s2 V' l. C S
} 0 _& M+ T2 q; m% X2 p0 h' \7 M
-->
5 y* K7 i. M( X8 i, ?5 [9 z</style> : n; g6 k+ Z1 q
</head> ) X: C: m: C* {) \( G
<body> 6 |1 K% J, P+ m. ]) p; _
<div id="pic">
+ `1 w) V: }$ D. |: K( |! I# R. M<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, Q" D. t" h+ o! z, E, I; S- t</div>
/ d! E9 B- `; P/ [; e6 z; t</body>
7 |( W" Z K# L2 Q) a</html>
3 ~# K# E- Y4 Y: _% A7 R4 x! S7 e; {, q6 |
百分比适应:
: |: t( Y0 O# T" z以下是引用片段：3 A8 `% j5 E# i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 P$ E: J: \+ e# V" |
<html xmlns="http://www.w3.org/1999/xhtml";> 4 d2 [6 T8 @% J$ K, B
<head>
1 b5 ^8 F* R8 U* ]0 R" G2 w<meta http-equiv="Content-Type" c /> 8 \2 E# a$ H5 n- t6 S
<title>css2.0 VS ie</title> 1 X- i# E E3 N4 Q5 n9 t' I
<style type="text/css">
) }4 d) l9 i: k* \<!-- " y7 o8 M4 ^2 j% I
body {
" r1 O* g' }7 i; _font-size: 12px;
* c$ k O- T m5 t& ^text-align: center; . q- d8 P" d) s9 q! T# V, Z2 d0 Z
margin: 0px; 0 ^! A$ d# W9 o
padding: 0px;
* I1 Y7 L7 e9 S% _0 s}
9 ^; m8 d& Y# d+ r, O3 P+ y#pic{ % |. ^/ @6 q/ g& H
margin:0 auto; ) Z% W; Z* @: T$ o" Z: |
width:800px; ! ]" e3 {9 ]6 C4 S! y3 Y+ D. n3 v
padding:0; 4 y& E! q4 N- x$ O9 |* a& ?
border:1px solid #333;
1 ?' `0 U U* Z# ^# ~9 r& ]5 c } ; e0 F8 e' l* \6 u8 l, W: ]
#pic img{
' l% b, T/ m& f) S6 X max-width:780px; 3 ^1 Q3 U3 } q( A }9 I2 o
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" t5 v- @2 S1 |2 y9 ^border:1px dashed #000; % o8 g) L; {0 j7 H- U3 w' e
}
" r3 W. x: E& g* r# v7 F2 _: P! I9 @-->
$ X. |! z0 W/ R$ [# g</style> " |( ? z9 z$ }8 ?* |( | Q( _
</head> 3 r f+ E! D3 V, f2 {8 v
<body>
+ k& M* z1 O2 D Z! A% Q<div id="pic"> 3 Q8 I2 Q& A) A0 ]
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( h! w$ S2 W$ \9 X* M5 |</div>
; t4 m" {. c' R5 ?# V# f+ k</body>
: ~ r4 e2 r. z: P- _ }8 D</html> |
|
发表于 2007-12-8 14:55
| 