|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14341
- 金币
- 2456
- 威望
- 1647
- 贡献
- 1404
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* R/ Z2 s* ^2 m' O9 D- k
关键在于：max-width:780px;以及下面那行。
- w" z" K5 ] r4 o% q固定像素适应:
9 ?/ e8 `2 T% W# h5 \$ b. m7 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> 以下是引用片段：0 G+ F5 ~! G! ^4 t! ?2 @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # Y' u) x% v2 s7 q/ x1 f, l9 b# r
<html xmlns="http://www.w3.org/1999/xhtml";>
+ v& A8 {: M) S, D) Y7 i<head>
# o0 Q$ }) m$ j: T1 S5 Y<meta http-equiv="Content-Type" c /> 6 d- ]! r% J) E# Y( n- U5 M
<title>css2.0 VS ie</title>
3 h8 f- k! t+ t6 W. p5 q" @<style type="text/css"> 6 H5 V% c/ P& Q& [
<!-- 5 H5 |$ S5 p% x
body { + \; A' Z* \) b7 ?+ ^8 z7 w
font-size: 12px;
. ?2 o; h! l- e6 W6 R9 F% |* Ltext-align: center; 5 `' A/ ]# @; b8 ~
margin: 0px;
- Q; i( d( ]" p: w" Kpadding: 0px;
( [- G) E+ C* D0 ?( S! n4 C/ ]3 y}
( p( J" z% K0 o9 q% k1 G0 s#pic{
- C( u( r7 Z! ?3 o( N margin:0 auto; 5 G# f* D/ h3 G& y( I. T% }# s7 z: z
width:800px; 9 S* \; e7 w, f- w4 a* [' g/ D
padding:0;
5 K' I) Q( U6 {" m1 O- ]/ `% E border:1px solid #333; & ~$ {+ ]3 y' u# d: }
}
& @9 t0 b! E! L1 u! s7 Y0 g: `2 F: e0 J#pic img{ * w4 ^9 I5 b$ A& e. A3 F
max-width:780px; 0 P6 R* W% k$ A; z; a* R
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' T& L' k8 J; r% tborder:1px dashed #000;
9 G7 m& L3 S* B$ _2 Q* [2 i}
7 \3 \# k! L; t& }0 R5 n* y-->
" Y: Y ^/ H/ H# L6 t</style>
" z4 B# y/ q4 i" q! x9 A1 }9 t</head>
) e+ ^ `% R5 V) I<body> * g% B \, j/ N! v$ e/ @
<div id="pic"> 9 s g9 @* T5 ~$ }( u4 s: y9 T0 u
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> t( ~! a2 P/ I) b" Z$ j2 _
</div>
. N/ r5 U/ V3 y- R) f' }) K' F6 I3 K W</body>
. w; z$ T# |3 w: g/ j, V</html>
, M* {" P" P9 V$ [' J
8 H b* v, ]5 R, D0 S! y百分比适应:1 H1 h. K- T4 O3 B
以下是引用片段：$ [0 L h4 J% e! L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / [% O: [- a1 m
<html xmlns="http://www.w3.org/1999/xhtml";> - @8 i% s/ s9 |' j
<head>
1 \& |4 ~* x9 p, q" \<meta http-equiv="Content-Type" c />
# F! T7 @6 I( c7 j- w4 j+ k+ U<title>css2.0 VS ie</title> ; G4 N/ N* A& a
<style type="text/css"> 2 ^2 m$ A- Y' h
<!-- ) T% X: M3 J/ Y6 Z: _9 n
body { % G8 |% s1 h8 \3 _/ H) F
font-size: 12px;
0 E6 e6 y* ]- A: o; h, t+ etext-align: center; 2 S0 F7 ?; i! I. F
margin: 0px;
- B( [8 S( Y. S1 P5 i* spadding: 0px;
7 C" R" g8 t0 M7 V. N( Z+ y+ ]} 5 t3 K( E9 N( P' O0 w7 b
#pic{
! C e# S w; n6 @$ {3 b. A margin:0 auto;
8 P- |- O( T& t( r, A0 o width:800px;
. a1 e5 _6 k# T0 c( ~9 F. Y padding:0;
+ T$ r* Q( b- i border:1px solid #333;
# _+ R, z9 {, J+ X* O2 [/ { } ! j O6 B& Q! a2 [% d& j7 x1 p: K% l
#pic img{
' E2 O9 F/ |. B" k0 h9 p6 K max-width:780px; $ B2 _: }' P5 K5 y& c: d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 x& N+ p: Z2 m+ D5 }border:1px dashed #000; \9 H. y7 w3 W9 \4 |/ Y: P5 z( V
} & i7 C0 J4 ?# C8 s* N! Z0 [" H! p* C
-->
3 x. Y# Q/ ?3 f' R& V</style>
% ]8 z j5 I' H- w" \</head>
: K) @# }- a2 q( a- `<body>
% w$ v& r0 {* N, R8 l+ C& W, z<div id="pic">
* V: I; h+ q$ H/ G9 Y# |) V# V<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 _& G) W1 d6 H2 A
</div>
^; ~. J# M5 T B8 e8 e O( Z% l</body>
. z, `8 H1 ? I3 \! Q, N1 _</html> |
|
发表于 2007-12-8 14:55
| 