|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14347
- 金币
- 2459
- 威望
- 1647
- 贡献
- 1407
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& y6 i3 [. \! O0 f* v4 }! F4 C关键在于：max-width:780px;以及下面那行。
9 k* c; s- _% L* L, ~8 Y8 x' o固定像素适应:: ?3 S0 A- ], K- Y n8 o x: r$ a0 y
0 l- m, j# I8 |/ w. Idotted; 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> 以下是引用片段：
Y' t& z) j9 t: f& d, a( ^# B+ F<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 t$ q: [4 Z* l: Q
<html xmlns="http://www.w3.org/1999/xhtml";> 4 X% r ]* P( G$ h! }) f' {
<head> 1 f; j8 }# I O8 D$ e
<meta http-equiv="Content-Type" c />
_3 p* _) \4 _3 _, x1 a9 \5 b<title>css2.0 VS ie</title> * y/ x! `+ v: u- r" h
<style type="text/css"> 6 J, [8 C2 c: c _; d
<!--
6 A: w" F2 A) rbody { - i$ v5 H5 b0 [, l: x
font-size: 12px; * k* `: a# M- U1 C2 |3 e, ^
text-align: center;
1 T" D$ l& @2 a& S: @9 v* amargin: 0px;
! T# p) f! x4 x3 q# [ p! X: Wpadding: 0px;
( P, z I% O$ _5 s" U1 W} 7 [( W& E8 V6 Z q+ W1 `' L8 m0 t
#pic{
$ m, c0 m# {3 r) Y( M$ X margin:0 auto;
+ e# y. g3 \5 O$ u# ?& E! w' |: z width:800px;
* x; Z1 T# f% p" P2 \ padding:0; & I' v i( K- H& ? k. v
border:1px solid #333;
) y! i! w0 X e. C } 3 Q4 _8 d+ [4 V! w s6 k
#pic img{
+ ?" L8 ^ ]4 f9 H max-width:780px; # {8 z/ e7 S, @+ W: X* X
width:expression(document.body.clientWidth > 780? "780px": "auto" ); - y' @7 v h" O! G' P1 c9 {
border:1px dashed #000;
' V8 S8 {2 F. G% y& c; B}
6 {; _* J" O/ n; L8 m-->
4 h3 t: r7 [5 D7 G" A* q</style> 0 Z% I: r& W1 Q( v
</head>
! [3 F% h B4 [- }% w& W: L<body>
, q, F: c* l8 |4 t<div id="pic"> $ ]; @% R" |5 R. j* q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( O5 F( M+ Y/ l0 k7 @</div>
% G! a( V9 `+ ^8 @ W</body> 4 d. A5 `7 H- R
</html>
, q' l+ p" R7 D) Q/ B" C5 T
0 H e4 n8 y! `, I: n: {百分比适应:
5 o T& h) v) \; [以下是引用片段：
7 k" Y% H2 |7 d3 V6 Z& H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 X( ?. O& S, l: p& d
<html xmlns="http://www.w3.org/1999/xhtml";>
1 j& _/ x( P" U<head> / a( }% X+ z& g3 m
<meta http-equiv="Content-Type" c />
: t7 Q4 d* I; c& A7 W3 ?* q1 q$ t: a<title>css2.0 VS ie</title>
, m, {; S) D: \: r$ o- j; ~, ]<style type="text/css">
6 T) H3 C1 ~! b& G<!--
+ @7 T: s6 O1 @: ~: B) sbody { ; e+ V7 f3 j: Q6 F8 T! X
font-size: 12px;
; h, `+ ]0 ~+ |4 U j) J! qtext-align: center;
+ F: `$ e* d5 Lmargin: 0px;
, @5 I* Q* u7 R# G' P& ~! X: Upadding: 0px; ! ]+ o3 R6 f- F" R: F5 E. D
} ) ]9 J- N. G6 D2 t3 ^
#pic{ 1 T: y6 g7 A0 P& p+ s' f$ o% { I6 m
margin:0 auto; B5 |& k* Z# E9 a
width:800px; * D6 T+ ^1 m; n* J! i. z% [
padding:0; 5 r" {) S1 ~1 N+ p/ f; B( q2 x
border:1px solid #333; 0 C. G; q E) i7 F0 {
}
1 ` x$ D* K, N( [: k! O7 S( V& `0 z. P#pic img{
+ S6 V) E& @* f' h7 @ max-width:780px; 3 j9 G. @" D& J3 [$ P" I
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, Z" L9 L& |$ hborder:1px dashed #000;
2 L. T. | q/ I* K- |' z* S} % \' ]% u0 D6 g* b% ?# c
-->
A# S. m# c" J" f</style>
5 p; Y; ?$ m' x" ~+ I+ C</head>
$ t; ?* z: @' x' c<body>
7 _2 B" X! _* J<div id="pic">
1 p0 y2 i7 D n9 e# r# w<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 o$ ]2 R* j: m' y0 o9 l4 `$ S
</div>
; O6 o" p+ p& X. D" ~2 u0 z4 N k1 r: ] u</body> ( }& q3 z# U+ {7 G: ~4 S3 ~5 a
</html> |
|
发表于 2007-12-8 14:55
| 