|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。, a7 l7 u1 j. V
关键在于：max-width:780px;以及下面那行。- }. R- x' R" x/ s) r0 x6 b
固定像素适应:( M& W' Z6 N6 F' k
X9 [' o( d& u, e |8 _
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> 以下是引用片段：8 ]* F+ n+ ]! E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 T& `, Y1 t# ~2 l<html xmlns="http://www.w3.org/1999/xhtml";>
' H* q; R; l3 |$ T# `7 ^7 W$ C4 @<head>
# B' O: C& `$ q2 T6 P3 W4 D<meta http-equiv="Content-Type" c />
# m. F1 I5 s8 l5 u/ T+ X( v9 n<title>css2.0 VS ie</title> # k4 N( X0 ^5 l$ @4 |
<style type="text/css"> ; z- w2 ], C$ j+ Y: r0 A( t
<!-- / s, { A% _0 j* w* ?: ^. R
body { : ]3 j& ]. B; k, {) H( {2 I6 |+ M
font-size: 12px;
) A9 ?4 u4 t \. N Wtext-align: center; 9 d6 K$ y0 |; L6 U
margin: 0px;
4 V, W8 `" C3 j0 ^2 @0 Y7 h o9 opadding: 0px; 0 K/ v: w9 L) b* ?; a
}
6 e/ h5 b1 K) O& b X1 A& p#pic{
9 B' r9 l) J+ A; @5 | margin:0 auto; 9 R* z6 B' L% d! h2 q$ S
width:800px; 3 R" l& l' @$ i% e5 W1 p" g
padding:0;
! z: ?8 @" _0 I' [7 W border:1px solid #333; - k$ G6 B& n9 G- L$ k5 f9 U
}
! ?4 Y+ s2 X* z* n#pic img{ " N7 D9 p% F; R" c# E7 H
max-width:780px;
. B9 @# F! V( a5 r1 W7 ]# Pwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ) \. |7 @( @2 [+ C! E5 C' }( P
border:1px dashed #000;
% V. W/ o4 C. N$ L1 W7 U}
5 f' N% l; _3 r) |5 H" W--> ' H0 Y; L- k( O3 D8 G9 f; ~
</style> 2 r8 J3 ]$ t6 }+ W: s
</head>
; [) V6 W( i! f% B. `: k6 h<body> , M+ Y8 Q$ N( w
<div id="pic">
) _7 J) A+ g3 k8 g7 ^: @2 ]* N3 ?<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ A5 F7 ]) X1 H8 C+ m2 o
</div>
- X1 v5 ~. B# R</body> ( g0 R# `9 q |# ]6 C
</html>
8 A6 {. @+ ^ {# g; i- r1 Z% R
/ [( {9 h9 y# N6 u百分比适应:
! r* C$ I b, K/ P4 v$ i, h4 W以下是引用片段：0 i. W A& Z0 a: T, g8 b" S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 }" i. H* _- [$ g, O<html xmlns="http://www.w3.org/1999/xhtml";> , H6 B, D( a; k* X3 r
<head> ' W9 ]! ^; }. N0 x2 ~
<meta http-equiv="Content-Type" c /> $ Y' ]5 |3 N/ I
<title>css2.0 VS ie</title>
+ v; a0 c$ A+ ]9 W* |<style type="text/css"> ; h" N: J& T2 q+ g6 @8 f
<!--
+ I3 h; X& k; o3 kbody { / f6 H, m/ m' g) ^: Q
font-size: 12px;
j V) s0 `" E- q/ n" h: ptext-align: center;
1 v6 V; u, l. _' e: Z8 bmargin: 0px;
: w5 m- }$ q. j) o- mpadding: 0px;
: A9 V; G4 T! }$ j2 U+ u+ f. \}
4 Z, Q) W8 o7 e" N#pic{ + M+ s3 Z9 i6 J9 F; G, f9 O/ a& n
margin:0 auto;
8 Z% [' @5 _3 R! ^* p4 N' ` width:800px; 6 x/ w6 Z* U1 v, Z3 M6 |
padding:0; 8 Q/ s6 v6 y5 _, l: `
border:1px solid #333;
/ h9 B( w8 G7 Z8 S }
. s5 n7 ^+ R9 Q" H3 E4 ]3 l$ [#pic img{ * V7 n' V1 c9 k( P: u9 E' }
max-width:780px;
: z$ H% m2 O6 Q4 m lwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ Y% D) y! Y: i5 T }border:1px dashed #000;
7 x, d$ ^) `- v# }$ i" s; s$ o} # ^! j. _0 |) I; V8 o: S, e3 \
--> / A6 v: Q+ [' o/ M6 |6 ~% T
</style> 4 @4 x6 ~, g/ Y* H$ Z0 M
</head> : L' ^* Q+ h; J/ h' l# O' P! h) {
<body> + C- i( a- U( d0 I7 L
<div id="pic">
' z {5 Y. ~ u# B8 L" s5 g- L" d<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- ~9 x/ P) N a3 G: C3 w6 t</div> : I, d' O0 X5 a; M
</body> / [+ q4 C2 v& ^0 S
</html> |
|
发表于 2007-12-8 14:55
| 