|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14323
- 金币
- 2447
- 威望
- 1647
- 贡献
- 1395
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* q! ~! a- L% w" S4 v: y% f6 n0 c u
关键在于：max-width:780px;以及下面那行。
1 T5 A6 b9 t+ j; n" f固定像素适应:+ h. F( u o& h [( O/ _% M, W
0 D: k1 y0 `/ S( k/ W6 H% h2 pdotted; 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> 以下是引用片段：( s8 [5 ?# x% z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 o2 D* D8 Y9 Z9 F7 h
<html xmlns="http://www.w3.org/1999/xhtml";>
7 z* A+ T1 B& S- F3 n% ^" y<head> 3 y- L0 Q4 w! u$ T7 G
<meta http-equiv="Content-Type" c /> % X1 T2 w* ]3 R: `0 W2 ]2 u
<title>css2.0 VS ie</title> . ~0 [1 B3 M7 d) R
<style type="text/css">
+ V4 y( J9 O% q1 u9 o0 Y' a<!-- ; e* J6 n, H" _6 F& g7 w4 G' B
body {
0 ^- C1 Z; |1 y1 |font-size: 12px;
* T; Z ]% \4 z+ ]* n6 r9 B- |text-align: center;
9 h/ P9 ?9 Y/ U) Ymargin: 0px;
' v$ E' {9 |3 g+ R7 N5 Apadding: 0px; 0 g5 B. F2 v0 o) }6 R
} , Q0 Z D; p4 w
#pic{ 0 S9 D8 i4 l& g
margin:0 auto; & B5 s5 W4 T$ S
width:800px;
% J0 {' @ e. _$ G& q padding:0; 5 y' l) V" _0 C$ F8 g
border:1px solid #333;
! O$ J P m# _9 y" l8 \* m }
* e9 `/ n* P- I: z F/ U' _#pic img{
* F9 O& Z3 ~* t9 m$ {" I9 f max-width:780px; ; s( y5 b" e, j$ v* t9 g
width:expression(document.body.clientWidth > 780? "780px": "auto" );
. y0 t9 k5 p' C9 C2 bborder:1px dashed #000; 1 p: T; k8 |8 u- ?
} ; ?! m# y+ V3 T# M r
--> # x& q4 ?0 k, z+ V+ [0 C
</style> ' q2 i6 T2 ] i' M2 e
</head>
4 Z# D# X3 K9 a, i8 S<body> # V+ a3 m" e+ L9 T' b. T4 S8 N
<div id="pic"> ! [& k3 }" q* S1 F
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - q% e# G6 U& |+ \( g: `
</div>
. f& S# m4 h- p' l* J; _9 R</body> . B! K1 ^! U& e) z4 x
</html>
$ ^3 P7 ~, N: k1 U! G2 C |0 @3 F1 M. H. }5 P( Z! ^$ L
百分比适应:/ W& R9 S0 Y" r
以下是引用片段：6 P7 ]% W9 M: Q E1 [2 K. S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
y' w1 \! Q2 J5 `; O+ @<html xmlns="http://www.w3.org/1999/xhtml";> & f# ^7 E: ]# h5 l( c6 Q* w
<head> - R6 [0 x& l0 j* q. j: N6 a
<meta http-equiv="Content-Type" c />
5 T; d! g& N, U+ t* }3 ~<title>css2.0 VS ie</title>
$ \* Q8 s# ]+ G# N7 F<style type="text/css"> 4 Y3 p7 L/ ]* n4 B
<!--
. W$ X% W$ y4 a! l4 |' p' S% Lbody { 6 L' W* v4 r: W, p2 y9 C
font-size: 12px; 3 w8 U7 |- V( ~# @7 I3 r8 z( @
text-align: center;
4 _) d0 y% K" ?& c0 rmargin: 0px; # w0 w Y/ ^6 I. ?# J9 F
padding: 0px;
; N( |8 `" \ ], c5 a} # C. |2 T0 a: ?2 \7 Y$ o5 a- r( m
#pic{ # T/ I9 D# L8 U- P) H. O
margin:0 auto;
) v. H* A* e3 X5 z% h7 k0 w width:800px; * q5 z- L/ P' N8 N1 V& C: e6 d$ F
padding:0;
0 n" `8 `' c- s& J3 ?9 w border:1px solid #333;
# s# v6 I4 g/ ] }
8 c; I C& [0 f#pic img{ 0 l7 o0 A7 S2 M C$ p
max-width:780px;
8 b9 Q& S& p* f, R: H. } j- gwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 1 M0 K( c2 ~$ y7 r( W, j8 n3 T* @
border:1px dashed #000; 4 l+ X6 ?% c" a3 ]/ C9 y1 D7 t
} + z0 C6 h' j) h8 _
-->
8 a S B+ j) _2 O* ?" _' s* C</style>
$ i. r" A% F9 k9 L* n' T</head>
! r' Z2 M5 ]/ V H<body> : B F& B# \. ~% t% k
<div id="pic">
7 U* S0 M, S+ n% E$ p0 P3 D<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 J3 @/ r2 t3 W% {</div>
- k6 ?3 i2 a8 Z. o- [. ~4 V</body> + |2 ~/ o; l) e; a, y
</html> |
|
发表于 2007-12-8 14:55
| 