|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14283
- 金币
- 2432
- 威望
- 1647
- 贡献
- 1380
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。8 ^4 m% L* e5 E3 p! {) W3 Y! l3 {
关键在于：max-width:780px;以及下面那行。! [' |1 u( t& I
固定像素适应:: p' |% d' V1 k# @: A' D3 G& ^
/ d3 H+ n( D6 _( ]6 k, H$ Y6 q m8 Bdotted; 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> 以下是引用片段：6 T3 `: _6 K( X7 i; d8 y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 P; s6 [0 {/ ^6 `
<html xmlns="http://www.w3.org/1999/xhtml";> " C* v9 _( d: y u5 R* k- `9 v
<head> + I; P1 n+ e. ?$ s7 @- z2 S0 W
<meta http-equiv="Content-Type" c />
& ~3 _4 r Z& U; Y& u1 \<title>css2.0 VS ie</title>
' \& x& ?0 x/ R9 m- w<style type="text/css">
, b$ D, F* W I' F2 W% h8 `6 ]3 I& W<!--
1 b$ \( S1 ^# l% Dbody { / J+ {3 s/ d) P
font-size: 12px;
: ]) u) h: M$ ktext-align: center; ) p& W% X. X; ^$ J: z& E
margin: 0px; : C/ s% i" i: b% C
padding: 0px;
5 F" B: j% z4 I} * z% B! V8 e0 [/ {; i6 g- `! J
#pic{ , Y& r( {4 w% n# P! J% m7 l5 X* a
margin:0 auto;
& {; J# d `+ k/ u2 e( R width:800px; ! X4 n2 H& q2 A' a3 r
padding:0; # s4 r3 w9 ]/ @' p
border:1px solid #333; + _5 e- g9 ^2 k& v2 ]
} ( o( H4 f# h p" O
#pic img{ : N. j# T; K7 V" q. m9 X
max-width:780px;
. k# `+ F, m9 W1 z/ }width:expression(document.body.clientWidth > 780? "780px": "auto" ); ! p3 W8 k: u% I; b% e8 y, S+ i
border:1px dashed #000;
! k% R( d6 P8 Q% @}
* Y$ u$ [: a6 ?5 j# z6 l& r! [ J" C-->
1 B! n- z; o) _$ L</style> - g4 r; a9 W" c
</head> 6 G9 D+ p* i- b* J" i7 l# N
<body> 6 q' X @; k, I/ N3 p& ~
<div id="pic">
% r! \6 x3 o% m# x' H* Y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " K4 d* H' E+ n2 l" O
</div> ; N; N/ t: [- M
</body> ' M8 R/ h/ O7 e
</html> " ~$ q: F, i" g5 N' T" H% {! H
$ F3 G8 Q: T+ o, y% O: y
百分比适应:
# T6 F4 K" F8 @8 k; z' s$ W以下是引用片段：
! E1 t' F1 _. D1 ?/ [8 |8 X3 _<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ P2 k. y& w$ d) D; T1 w<html xmlns="http://www.w3.org/1999/xhtml";>
, \7 @5 A. M( |' t+ S3 B/ d1 v<head> / w! c& K0 ]+ P& v' c# r
<meta http-equiv="Content-Type" c />
' d& Z. W" J3 {2 {3 x<title>css2.0 VS ie</title> S0 H! h- L/ C" p( ?7 N
<style type="text/css"> % {" l! W# l# i* g
<!-- + M3 Y& v: o* O1 H/ D, p& s/ R% {
body { ~ D+ Y7 P9 j2 m6 M
font-size: 12px;
: R3 c) i: p; Ltext-align: center;
- A4 h1 h/ X1 `' E0 T9 Dmargin: 0px;
& L+ m1 u! W1 t: o, k% s( j. T6 c7 opadding: 0px;
7 U1 o5 y7 ^$ ]9 g}
& z# ]# r& ~) j0 d#pic{
2 u+ P/ e+ i/ o margin:0 auto; , y0 N4 p0 N/ I4 N
width:800px;
: l- o5 O( M ?# `+ F+ t: l: [6 ~ padding:0; 3 J+ @1 N4 @: E: Q; {) S! {3 Y
border:1px solid #333; l$ n; X( E$ e: j' @. U# d& D
}
: H4 C4 h9 \9 O# U9 Q, K8 N$ J#pic img{
/ a# C4 i# R+ c" g8 c8 c max-width:780px;
0 P. D7 p* N6 X( N+ y) Xwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( M4 O' x9 G- d4 H. L& U. Iborder:1px dashed #000;
) q6 i: V& r; R# e}
1 Q5 O; @3 y8 U--> 2 e5 N& N, I& v1 b5 Y
</style>
: x% {* O ~( I+ o</head>
! G; y* s, K9 l9 `" f<body>
( o' a3 r5 v9 n9 K, d. X: _<div id="pic">
0 \4 @* P* z0 W. q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 l. N) u u1 q2 y4 H: {2 ?
</div>
S5 F" t S6 G6 T' n</body> ) ?0 |* u+ D5 s; \# q5 ~- ~5 ?* D
</html> |
|
发表于 2007-12-8 14:55
| 