|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14431
- 金币
- 2501
- 威望
- 1647
- 贡献
- 1449
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& Y7 L0 v4 x* d关键在于：max-width:780px;以及下面那行。' [* I' f! w/ B) [3 Q. |/ @2 r
固定像素适应:
( Z- E7 K. x- S# n& k9 F. B e# J# l ~
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> 以下是引用片段：
9 l, b( p: {/ O- i9 ?5 g<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 z* P4 A. P3 u; y4 c
<html xmlns="http://www.w3.org/1999/xhtml";> 4 H2 T" ?: O2 Y( P' |
<head>
8 x8 x$ R2 ]* G2 \$ x& [9 I<meta http-equiv="Content-Type" c /> ! I5 F6 i' H" O: R- q
<title>css2.0 VS ie</title>
* w j1 t5 J2 @/ u<style type="text/css">
$ }# K! _0 ?0 `) w. I" }: @7 q<!--
* \; F1 n1 H# ubody { 3 ^: ~2 v8 E! c% s
font-size: 12px; 0 l) |; H- a9 y. m' h" m% J" H; l
text-align: center;
& S" f1 m$ y' K$ { h! o$ Imargin: 0px; 0 f7 m7 L0 H! p2 W2 {1 r
padding: 0px; 0 S0 x, r, [( `4 E
}
+ t3 D( v- p3 z& O2 @4 U* d% A#pic{
5 |; n5 g! n" N/ W7 {* {. Y margin:0 auto; 3 ^' i O1 T$ L. c# C
width:800px;
N7 n9 n- w J' }& _- \ padding:0;
7 ^. c! ]) S: J3 @ border:1px solid #333;
& L$ z8 d* j# L# @" S2 O- F }
% R" W% m3 T0 O N0 h. C+ p8 z+ P#pic img{ 7 w ] n% C+ g6 j) v$ K
max-width:780px; 2 Y: ?- M) a. O j- x
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! y7 `6 I. Q' e+ `! H# s; |' _border:1px dashed #000; : O9 E9 {3 `4 {$ x' G" s& m
} 8 Y% T6 t4 b/ P# ~# ]
-->
1 L9 f% F3 d6 W* f, O</style> 3 _' `8 s7 S" d
</head> * `: z2 k4 y% ^+ O
<body> . N" b2 f9 X3 {5 f$ U; x+ F
<div id="pic">
7 V: F7 I, _% d! y. D6 i<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% T2 j c" Q* p4 p& \8 N</div>
: N1 U! P& E3 Z8 t: O5 o</body>
: [+ r# M' y$ o, ?1 w( r. ^" D</html>
! b$ R$ Z/ Q. X9 P5 |/ v1 \5 H& V) x, Q3 K3 m' Q1 \, J( ?2 Q$ Q' p2 w
百分比适应:
A& k5 Z" g/ |: [1 \6 k以下是引用片段：1 b: C8 `* u" v) E- j9 A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " K9 G( P5 J9 H
<html xmlns="http://www.w3.org/1999/xhtml";>
$ o) a0 i7 k$ }! L. Y- Z4 l. @+ j<head> 1 F' A/ u1 x7 L+ y: Y; H
<meta http-equiv="Content-Type" c />
# r& F0 j' T9 V<title>css2.0 VS ie</title>
# D- S/ q4 K, }9 L" m2 t! v$ ]& M* M<style type="text/css"> 1 k+ R X" [) r: |5 t6 X" x2 N* u
<!--
9 @% a2 _6 g* P3 X0 y3 Bbody {
$ n! ?; j" J# ]* p( o8 r Dfont-size: 12px; , Z3 h3 @6 T4 x5 P
text-align: center; $ o: ^( f7 ^7 F9 I
margin: 0px;
+ B! L3 F" L4 B1 h% D- o$ upadding: 0px; 7 {# v$ O& S$ n7 @4 U# t& V0 j
}
: P2 Q5 m% j: ?- I4 A#pic{
7 s: }2 x5 x P0 L" [0 H4 w5 b' p margin:0 auto; 3 e+ V6 z3 w& g; P6 M; W
width:800px; % P, d- I/ }* i1 G
padding:0; + L/ l% K: {' x3 a& L7 Z1 f; ?3 K
border:1px solid #333; - l" W+ Q. z! j9 J' g
}
3 S" o( e; z5 `+ }6 T6 m& U8 a9 N#pic img{ & | Q, D" O9 ?. S6 f
max-width:780px; ' m/ ^& A+ J' \2 r Z8 R! y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- d3 L7 F2 f# B' v- C; l4 ^+ _border:1px dashed #000; 1 F1 m% m- u; K
}
. A$ y( ~! n1 J/ @--> / M+ n6 w! S8 r9 q
</style>
3 c7 G" j! I) s7 g</head> 4 g( m& [% i0 ]0 @
<body> # D) v( h4 B- d5 E1 Y
<div id="pic"> " Q+ a& v+ x% J! S7 U- `( A0 a
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' r5 _4 _$ M2 X/ O/ v' J
</div>
; p# q9 @+ x1 w# V, d |1 c& T' o$ Y</body> / s6 \# D: c% ?5 O. \# I
</html> |
|
发表于 2007-12-8 14:55
| 