|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14377
- 金币
- 2474
- 威望
- 1647
- 贡献
- 1422
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ c0 d: d9 E; u' X5 R) i9 Z0 Z关键在于：max-width:780px;以及下面那行。3 p4 z/ N6 z" f
固定像素适应:4 o1 Z0 X. J2 u
9 u' h; ?9 h7 Z7 I1 ^6 B( K ]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> 以下是引用片段：
3 d% C4 ^# |+ T& D3 ?) P* i' v' B<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / i5 {) [5 y( }( l
<html xmlns="http://www.w3.org/1999/xhtml";>
4 J4 N: x- ]7 N7 @' ^% e$ Z- `<head>
4 @0 {% ]/ b+ x/ ]<meta http-equiv="Content-Type" c /> + A' `) [+ \ x3 a
<title>css2.0 VS ie</title> r6 p+ a+ i6 B
<style type="text/css">
" J8 ~; a# K7 A( E' Q<!--
9 X' L; O+ o) ~2 |* t9 F- Pbody {
: h* Q9 j6 R' }font-size: 12px;
& ?% L$ A! X* J" H# V: ^7 @text-align: center; * y/ S0 }/ N2 o, f
margin: 0px;
3 d) k5 R$ n' s( upadding: 0px; ! x/ U1 N7 }2 ~1 _. M
}
6 e: m' f/ n4 R7 v( s#pic{
$ {# M4 w- ~; r2 c# u margin:0 auto;
9 U: j7 R# D; z0 O* R. h* H width:800px; 0 j* k; |; j$ }) O6 y1 [
padding:0; : ~4 ?: ]$ U, h
border:1px solid #333;
" H; I x# }. } } 9 X" X4 a' d' B* m: U9 o
#pic img{ + @8 r& A. H7 W5 V; v( I1 z a. L& b* V
max-width:780px;
$ ], [* l8 @0 @0 w. W3 Y! uwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); # \" o" h/ e( [
border:1px dashed #000;
* N/ O% F- R# M- A}
; @5 V: c! j5 d5 a& P- y2 P--> " @4 Q* a6 r: L3 B3 i
</style> ; T- K( X% Z$ {- g
</head> 3 v# D2 N! a) L% K4 ` [; F
<body> ( c& y2 v7 ^# i" b
<div id="pic"> 3 B" Y8 H5 \0 N! R" z$ V
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 n8 X! `; F: [; j8 {# B</div>
8 f3 t) ]: ^( H1 D" n</body> % M5 _8 y6 `" i6 u3 ?
</html> : w4 [/ l; J9 w6 D( Y* \
7 |3 D! j+ Z% v3 y- b; J百分比适应:+ E; M( R$ F" _% f
以下是引用片段：' v; Y& k9 {. z4 H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 _, {: @' s7 z1 E<html xmlns="http://www.w3.org/1999/xhtml";> & M5 I7 u5 t V( y
<head>
: ]/ S1 d P$ z; ^8 R+ J! X2 f D<meta http-equiv="Content-Type" c />
* O, I6 f- m* h7 n6 }* Y<title>css2.0 VS ie</title>
2 l7 p, u# {$ D0 n- f2 T<style type="text/css">
. q0 a% \$ ^, z" e1 [<!-- ; l8 L1 c9 H9 x6 Y: w( S. h; ~9 E4 ~
body {
( t* c) a7 ]9 jfont-size: 12px; 4 M/ s8 v6 V1 ]7 L
text-align: center; . d6 `2 o+ \; O- K" F
margin: 0px;
, {- k a, ~: S& V. E" Opadding: 0px; ; h+ b, l9 b$ c4 l2 [
}
. o: y+ Z- U, ~! H) q1 _; X#pic{
' {) F! D. E o) U6 R- [7 i margin:0 auto; a8 { W" h8 P9 r
width:800px;
) {* F# L0 o F* G6 C( e" O padding:0; - M5 S% V! J; i- ^. j+ a
border:1px solid #333; : _* f0 x2 _8 L) p: z/ g" a7 C+ S
}
3 K: T- j7 i. \3 @" w& w0 n#pic img{
, _' I0 a0 M( v2 _0 o, ?4 Y# E max-width:780px; + j/ s$ S9 z1 }. n9 Z/ q V4 w
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); $ l* [6 j0 \! a$ N+ p; _
border:1px dashed #000; 7 |- o2 S5 q" V6 \6 v
} & R4 X4 Q; ~* u8 v! {" ]1 S3 \2 _
-->
W9 X8 M) U/ c3 n9 J- J; n7 R</style> ) Q8 m+ o0 V* `( L; P
</head>
/ k2 |6 p% q: L, k: x& q<body> 4 p5 Y5 }# d3 a0 a, ?2 p/ V
<div id="pic">
. \' e9 Y, a, H: @: t* D6 K" `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- e4 _) }' p7 l" b d</div>
3 W8 y l8 E5 N) Q& u9 N</body> ' s1 V Y& d9 D( f
</html> |
|
发表于 2007-12-8 14:55
| 