|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14349
- 金币
- 2460
- 威望
- 1647
- 贡献
- 1408
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 T! h' [& T( ]! ?6 r: K关键在于：max-width:780px;以及下面那行。: C5 X9 \0 G/ k [. G3 k
固定像素适应:3 Q( g, a! j; w% i0 W" o( @ l d
/ ?' ~. d1 M2 p; T; z( zdotted; 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 K+ ?. t3 V1 Z5 V3 Z8 b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) c# p) C/ P: c$ V; R
<html xmlns="http://www.w3.org/1999/xhtml";>
* R6 K* L. o; i/ F; B" X<head>
" L; {. `( Q7 x9 {, l$ n<meta http-equiv="Content-Type" c />
% A5 v: K" M/ {) M! I7 [<title>css2.0 VS ie</title>
0 [% b5 |. `% L! M3 O<style type="text/css"> 6 p% j6 K6 _+ Q- E' k$ _' g
<!--
4 `6 `! _: y2 G+ i% v7 X) Dbody {
0 }+ @, u2 J# `font-size: 12px;
+ l* ?& ~9 Y G( `; e' Utext-align: center;
$ O- ~" M5 K" a# Umargin: 0px; / _. C9 T$ F" x1 P
padding: 0px;
- s# E. ^$ Q6 X5 X: A( V}
8 q* {% {' h. ?#pic{ 1 Y! M$ V) ^ K" g' l$ {8 S8 i* R) M6 {( V
margin:0 auto;
! S( X! ?- G* ~- c width:800px; 3 x, }% j. h9 J
padding:0;
; J6 \; I9 ~. E; Q* O/ P border:1px solid #333;
$ k, z% k, o/ V j- t% O9 N% O1 {( ` } . i* g" J. J* A3 I1 H
#pic img{ & l' W, P+ J) m: d
max-width:780px;
9 S" Q3 z9 i' j( m# ?' mwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 8 G( P) r( s- `3 ~- |. n/ R6 P" g
border:1px dashed #000;
- R$ `* ^$ l- s' i, p+ ` |; v}
" L( L# g7 T& \' z, u--> 0 ]9 c! R+ Z) J( E0 a. w3 H
</style>
+ ^# B5 a. q7 u+ L& R</head>
' E7 c* X# B8 ?1 p: F<body>
$ c+ H$ P3 h# ^1 a, ?* p* b<div id="pic"> + D, L/ g; a. ]" {1 ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 C9 h) V) p+ D2 d; D6 k</div>
8 Q" B% { ^/ D0 H) O T$ M' h/ ^</body> 1 f& h. F& S9 a) i
</html> ' }0 a4 _$ ^, S d
% }2 `: d+ } x+ @/ f百分比适应:2 ~8 _+ ^; S3 T; U$ b( i# A
以下是引用片段：
# v2 }! a' {5 N% I5 T, N<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. B) G9 f1 t5 m4 {<html xmlns="http://www.w3.org/1999/xhtml";> 6 _9 ~& G" s) n$ i
<head>
8 I$ I% B7 R) ?' r<meta http-equiv="Content-Type" c />
9 A- O$ O, Y7 [7 _* A+ P% b<title>css2.0 VS ie</title> ' r. t1 g, G! ~* F& G
<style type="text/css">
1 O+ @! U3 I B<!--
6 ~& H% |, L0 ? @1 `body {
7 t% K7 |5 c7 F; B q1 V0 Yfont-size: 12px; - l5 B4 t1 |* k/ @0 G
text-align: center; : b) G6 N' f7 E$ x
margin: 0px; $ G/ P/ w0 l( T0 V3 k- q
padding: 0px;
: S% u$ ~+ \, D" [/ W* m8 R' n% U}
4 f1 Y9 L: q7 {#pic{ a2 e7 N1 s" A! ?/ j& ~1 z8 Q3 f
margin:0 auto; * g% i5 | H/ ]8 T7 C4 k- v+ _1 Y
width:800px; ; p* y j0 a) W) u. o" x+ `
padding:0;
6 h; D: ]" w7 t- K$ c7 D& X border:1px solid #333;
* l. I* B, r* r" j1 \ } 9 ^0 v/ X9 M3 u; {' c6 Q* I8 j( ^
#pic img{ 5 L7 @- u" b" g9 s
max-width:780px; 0 S% W; _! r* m( F2 ]
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( d+ U0 _/ E* `* r! s/ S4 Iborder:1px dashed #000; 1 d, U v4 U! I6 g6 W& @5 t
}
* l1 Y# g8 K+ n" M: n( L9 X--> ! x* n; D- k3 c, ?9 I8 g4 K1 [
</style>
& X8 g$ ^/ h1 N2 U, a</head>
- s. T, J* g- s V; [* H8 j<body> ) I" X/ t9 V* N9 T, q+ G& {- `
<div id="pic">
. `2 i, s9 d: j3 E' N' q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 W0 r' y1 M) e! G' G8 U( Q q</div> ) x! ?/ c- D* o3 u
</body> 4 ]; G+ { j# q( [# `/ z
</html> |
|
发表于 2007-12-8 14:55
| 