|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! ?# i# [5 w! D' T" n
关键在于：max-width:780px;以及下面那行。. l$ _" H6 {8 \6 ^' h
固定像素适应:. ^6 \4 Q9 \6 y2 |# P
) H! O+ t1 E/ f4 R* E" Qdotted; 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> 以下是引用片段：
0 r' t% g7 X, m. J' }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " G' O1 Z3 {" p V* U+ P3 L$ T
<html xmlns="http://www.w3.org/1999/xhtml";>
D3 f' D# r6 ]9 V<head>
: F: @! |7 P; {: o' T# ~; g$ }3 f<meta http-equiv="Content-Type" c />
0 O1 U- z& z( v. Z; O% f( Z" h8 {<title>css2.0 VS ie</title>
2 Q* `. {% E* G. e! S; }0 B<style type="text/css">
+ Q6 j) b! U6 |2 T) a* @<!-- : e+ V z: V2 N
body {
% i1 A$ U$ l. K! m2 A) bfont-size: 12px;
" m- G: ~9 Q& z. Qtext-align: center; 3 P9 f4 z* U. J7 S+ |
margin: 0px; , r2 y, p- }; c% A9 T9 `8 j
padding: 0px;
4 y$ y4 ]: `+ [0 ]; P} , }, ^2 w$ M- F" O4 ]' q& O/ C& x
#pic{ ; Q$ t- E7 A& ] N1 I& u. V
margin:0 auto; : ]0 r: i; @* S* y! U9 H }1 u
width:800px;
8 f) l, h9 g6 A2 |1 n1 A padding:0;
7 U( A3 f3 @' G) v- k2 s3 q9 i border:1px solid #333; + ~& q: c8 C6 c0 v. v
} . M m( x- X" C1 L, s. A
#pic img{
1 B) v! x) C$ e; [" h2 m+ O; w max-width:780px;
# w' K, f( T0 \9 Xwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
3 B5 R: @- Y5 W1 i% v; x4 |border:1px dashed #000;
. D9 T) R, `" x1 W) u4 v} ) a( i( w1 ?9 B2 N4 z9 s7 h
-->
+ b. W7 L) G6 w( L* a</style> 4 z( m! ?$ f7 O! a) K, A, U. }
</head> 2 f E( X# k1 t, J) N3 W
<body> $ [+ J! _. \6 G1 ], @6 Z
<div id="pic"> 1 W& R3 E6 w8 W3 A0 ^+ }, ]
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( R; j# B+ k' G$ w
</div>
( O& A1 C) J3 E7 {6 ~7 I8 P) x</body>
# w% G* A7 [+ U5 r</html> # E1 x2 ?" {: o- y& w8 J$ Z
" l4 B1 l. W, s+ z/ K! D& p
百分比适应:
! ^% i4 y6 q. I0 d以下是引用片段：
$ N$ v* e# z7 r) ]; J. W, [' L<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 a' A! z) M' P% r) j1 x
<html xmlns="http://www.w3.org/1999/xhtml";>
# {3 A4 j% N/ R2 r/ O+ k<head>
( e( W' V. s( ]<meta http-equiv="Content-Type" c />
: U- k O9 k! y! ~2 k, [<title>css2.0 VS ie</title> 9 s* F9 q4 V# s5 ~9 f# P
<style type="text/css">
, y0 J1 ]2 B$ s& l# b<!--
; E+ G9 ]; ~) z/ jbody { 1 N& O' Q* p0 P& I; Q
font-size: 12px;
9 y$ x k4 s5 `) ^! M( Vtext-align: center; 7 y" ^0 o1 `/ l8 W6 P% x
margin: 0px; . h) O M# H6 a& P+ ~: i; O
padding: 0px; ! |1 [8 N C5 p A. S/ P! M
}
. U' m: X, I2 F. x8 t& B#pic{ ( p, g) H0 _( n
margin:0 auto; 1 d8 }: C! ?5 e1 Y8 a4 F" g
width:800px; ( M' P! C$ R0 O. _5 j6 W9 G3 v
padding:0;
! |$ L& o. e5 y6 M; _ border:1px solid #333;
1 V! t7 T* Y/ E- y: |* }& m: o& t! L } ; ?. X3 H7 N6 a% u% i/ J, W8 b
#pic img{ - u0 O" ?) i( E- f
max-width:780px; 4 }' q7 D! X8 [ ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. V8 j* P3 a' p5 Kborder:1px dashed #000;
: [0 V& @6 @4 K$ y5 ` F6 L} 9 F; i& V1 {) C3 J7 T" ?+ ~- k* b
--> + h3 H7 B' G6 f: ~
</style> 1 g% j; g `8 {5 b
</head>
5 ?" Y& A2 V, R( `<body> 0 g7 O( l% c8 P2 M
<div id="pic"> # R) m) ^1 i. n. ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) O$ E! I+ |+ E1 I' \</div>
, d# n7 {0 k3 B" P1 j7 R& R</body>
. L1 M# X8 {( \4 u% F1 B+ F' J</html> |
|
发表于 2007-12-8 14:55
| 