|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。0 O: I2 \2 p* r( r/ E
关键在于：max-width:780px;以及下面那行。 ` F7 U3 g' Z, W. j; l8 w/ o
固定像素适应:
( P% }* j& \3 t* ?. x+ O# t5 m
9 @1 n: N1 Q; y2 qdotted; 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> 以下是引用片段：
; u" m* K& [ C1 u; d& V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 Z$ ^1 U) z, B! M" O<html xmlns="http://www.w3.org/1999/xhtml";>
' Y) Q6 v5 C/ c: g2 |5 E3 {* f<head> ; v s' j, F0 p: T+ T& j
<meta http-equiv="Content-Type" c />
1 s! r! V, i, j( G9 m% _& t/ q* p<title>css2.0 VS ie</title>
" P/ \* X* B; s! a \0 {<style type="text/css"> + b5 w L- s+ ?0 h7 `: M$ |$ L
<!--
5 h5 w& X( H d: M( Dbody {
) E9 ~- k3 z" Y* j/ ?$ Pfont-size: 12px;
$ S5 h- V" W9 i5 `text-align: center; 6 g8 ~: J" B$ D' z. t2 F) O7 K5 B
margin: 0px;
* i& `3 R' P+ h. ]6 Lpadding: 0px; ) Y9 v1 P2 J+ q, [4 J( f0 l
}
/ a+ K- m% c! h9 [- {#pic{ / n/ f% _ E! a+ O
margin:0 auto;
& [$ E2 l, ^5 X- _; Q; Q' ?5 e2 ~ width:800px; % I! r& n& Y$ Q, ]+ j
padding:0;
. y: w5 x% i# ~$ z! {4 c border:1px solid #333;
8 I! |* l# A. t. ?3 ? }
$ {; A& F/ c% I; E4 p& B* e#pic img{ 8 p* ~% U. P. q9 p- j
max-width:780px;
3 g! a2 c) Z, L% W4 \5 Nwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
" m: k- n5 B! X4 Q D) vborder:1px dashed #000; 7 [ W/ _& N# y o) Z* i
}
H7 O, g+ F% F/ A' i-->
0 n+ S$ f4 U% e7 c6 U</style> ; Z5 M5 o: f& A4 j. y* G _
</head>
7 `' I2 o- @# k w' y2 T<body> 7 e5 S* F; L# C @: i
<div id="pic"> + n( |$ ^4 X( z* U- U. ]! @9 Z$ i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . i7 h* X& f+ `( t: U9 e$ j6 O; ^: W
</div>
& Z9 Y) B& R L' S e</body> - q+ ^/ i y( A! Y2 j' b
</html> 5 g Q2 D+ |( X1 {( Y( z
# E% Y5 d8 |% t6 e, n" A
百分比适应:
( G* e' B2 H$ I; I以下是引用片段：
, b9 E; S: L4 {7 N* g2 m! b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 m& [- |$ S* {( w8 n1 B<html xmlns="http://www.w3.org/1999/xhtml";> & t+ E* r& N" S; t0 z
<head> / M2 K" h4 C% Z( w' k
<meta http-equiv="Content-Type" c /> 9 n0 l5 K% r! p. i% Q0 p, R: W# u' H
<title>css2.0 VS ie</title>
* O6 o+ p4 f) Y2 h r4 ? p6 D! {<style type="text/css"> 0 e. c# k3 H9 g
<!-- * t9 y, x5 g6 b3 m& ^+ J
body { 9 ^' y8 t7 d$ Q+ k/ M( @' w
font-size: 12px; s2 E* o6 g+ e; O4 n
text-align: center;
. A3 k/ l, Y+ h- emargin: 0px;
; D. K; b! m* p6 E! x5 wpadding: 0px; + v% E1 N# s2 Q( ]; e
}
* m) p. a8 U9 D- V. Z b) Q0 n8 A$ y#pic{ $ T) l, W4 Q7 ~+ v- b
margin:0 auto;
Q5 @, o8 W9 J: g$ x" a width:800px; " `8 G3 x. ?" q3 W
padding:0;
) X3 L( F( w4 C+ A border:1px solid #333;
- M6 c" T1 ~4 Y } ' ~( K9 S& e- E; P! l' f9 q6 v
#pic img{
$ _0 q) Q( w" |, ? max-width:780px;
6 e1 o5 q2 n1 z/ ?) zwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , p3 Q0 H& n% V# o
border:1px dashed #000;
Q$ x1 z) R9 O8 n}
7 D6 W) ^+ E0 ?-->
6 r" s% T) d7 F/ J</style>
) @- P9 I$ s1 m7 ^. A6 B</head> ' K" j7 n& M3 W6 R: s( P& G' @
<body>
8 P! x2 X* n1 ~* p<div id="pic"> . D. {6 [: {4 p, m! v
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- n* J! c) R; b% `</div> ; Z) q) K( l/ U, Q4 k" i
</body> ; V/ G1 P! ? j
</html> |
|
发表于 2007-12-8 14:55
| 