|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14413
- 金币
- 2492
- 威望
- 1647
- 贡献
- 1440
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ U# R8 H% Z1 z! C; [" q# _6 S关键在于：max-width:780px;以及下面那行。! s: `: O) C% [1 @: r, n R
固定像素适应:4 e7 ^" Y& S) {0 H5 g
/ H5 `$ o6 V% ~, mdotted; 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 n1 x, e* ]1 ?6 m- m4 H2 B: @- u<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : Y, V) D" f+ l
<html xmlns="http://www.w3.org/1999/xhtml";>
2 K* s2 x# v6 b& g% R. v/ l<head>
* h" P, ?- }& B<meta http-equiv="Content-Type" c />
& ~. |' o0 j8 Z# J0 A z6 F4 ?<title>css2.0 VS ie</title>
( E d- C, N7 y5 j<style type="text/css"> ( p7 W- N: r, b; A3 q) i, K5 x
<!-- % A9 [4 J0 l/ t) N- c% a }
body { / p8 [1 G% l1 R) S5 |
font-size: 12px;
* l" Z5 U$ I. j `2 @7 F6 L% |text-align: center;
0 Y( g6 h2 I; [margin: 0px; & l0 a' l# X {9 j7 s2 X7 x
padding: 0px; % U k( w" i! g' d( O
}
! Z5 n: t- {2 H#pic{
3 h. s. ^9 P5 J. {& A0 K margin:0 auto;
1 i3 @ {4 D! [) Z1 A8 \' _, N width:800px; 0 b) |! n! w- V9 q. z: X9 \; g5 I
padding:0; 8 y0 h) u( r2 p
border:1px solid #333; W6 U% S$ t+ I0 Q% h% u/ P) b8 ]
}
" _- [+ B* x/ v* p5 ^& [0 W7 @) L#pic img{ + H8 a' d3 a1 c! ?* |
max-width:780px; 0 L; I9 ]3 z# T* G
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ H: T5 c# I5 S4 Yborder:1px dashed #000; 3 n3 k" i& R- U- H4 @1 O: `9 B
}
7 }' U2 A* m3 k! y--> + Q' b+ V6 i- Z* o0 {6 i
</style>
6 G6 G' J- O. q* |</head>
: ^: i7 n* J2 }* u; T* T! {<body>
8 z3 ^* j: w7 i( e" {2 B<div id="pic">
" B" Z! {+ B, o! x0 C<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 }- C9 o9 m# W1 T: t</div>
; m1 k, r4 H( O' i8 d4 S# [6 B</body> % X' L# {/ Y, c/ H M4 l5 G) ?
</html> ! }. y# @, ^4 U" V+ z6 u
( P' m' f2 o( t$ X1 b百分比适应:+ k) f. \+ m! @; u# @4 F, [& d
以下是引用片段：/ D7 F: K6 V' G( p; c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . f4 D, F0 w+ d1 m
<html xmlns="http://www.w3.org/1999/xhtml";>
7 m6 {# j6 P+ I7 y<head>
0 K/ q) x4 _* a* C% q. C3 B<meta http-equiv="Content-Type" c /> 3 L7 |& ?; k8 r4 M9 x
<title>css2.0 VS ie</title> / r+ B' i0 v4 w L. Y
<style type="text/css"> ; v9 X$ b _2 n2 t5 l3 K
<!--
8 M/ c0 i/ R# n$ gbody { . t* |$ M9 Q7 Y+ A2 R6 v; w
font-size: 12px;
' u- f( V. c h$ q7 Z! ftext-align: center;
, d# M; B0 W& j# L' tmargin: 0px;
' e6 V6 |0 i& k8 r+ G% Y4 i2 Spadding: 0px;
/ ?$ O$ j2 S g- k( N ]0 d} 0 F" M& R; x& g' N* j. F8 T
#pic{ 6 r; Z- x4 h: A! X
margin:0 auto;
: J# M; K- m/ ~7 G' a% H width:800px; , ^: b8 B! N5 x: _! }0 H
padding:0;
# t! M# q' ^% C, e border:1px solid #333; ( `( g1 q+ r* K
} 8 A" u+ |9 ~7 q/ @
#pic img{
6 v: U8 T7 `+ Z: d! `% p7 R max-width:780px;
* t* i( g5 T# L' l7 ]width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. m$ L. ]3 y# l: G/ |% C. uborder:1px dashed #000;
6 L& ?2 i% s- O$ D: n+ Z} ( D- ^0 o4 a+ y
-->
/ j) M. i0 L3 G( h</style> 5 H" [( w& m$ V' o3 h7 a
</head>
& O& q, W# z+ x4 U<body>
8 h- _5 `# M( W( c- E R2 S<div id="pic">
+ S3 M) X" k( ]2 p! n: B<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : E5 T! E ?) l7 m$ n/ a
</div>
! n' ~$ ?! D- W0 ^: W</body> ( {1 z3 _( U7 A; }# l
</html> |
|
发表于 2007-12-8 14:55
| 