|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14427
- 金币
- 2499
- 威望
- 1647
- 贡献
- 1447
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。- ]; N; z8 v, l ]5 r) S
关键在于：max-width:780px;以及下面那行。$ H, X3 ^1 r1 J: [' n
固定像素适应:3 Y% t0 k" X% x2 o/ r) c
/ z3 J' v' _4 k. e( x
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> 以下是引用片段：
4 @4 N+ V5 V( A2 ]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % O- [* X4 M& c- F
<html xmlns="http://www.w3.org/1999/xhtml";>
0 o, h$ f! J/ |! Q% ^<head>
! i' G2 U0 c3 [: z% D1 C<meta http-equiv="Content-Type" c /> ; {# p, y; `- f" ]: P, G
<title>css2.0 VS ie</title>
( S$ g9 y. L$ t" \0 Q<style type="text/css">
( B% p4 `1 K, u<!-- / b* `% @0 k. {( L3 q. l
body {
6 \" S; f/ Z7 a' Y4 Ufont-size: 12px;
" S% o% j6 L" B) t; a' Itext-align: center;
( N$ j9 @. V& \margin: 0px; 7 B& I, w c6 Z I* r$ U3 f
padding: 0px;
1 ^( n2 R3 U# i; Z} * M' b. e' V& b# R7 {% ?! k) ]6 d
#pic{ 6 p% l4 x2 w; D Q0 q9 n& g. J" b
margin:0 auto; - o* k! j6 q! s% n
width:800px;
6 @/ _* v7 n/ x! H7 ^ padding:0;
5 ?: a4 L. n, f% h border:1px solid #333;
0 Y/ K# n8 S% j' j }
! i5 s" X/ [5 p#pic img{
7 |5 z) T0 y8 m+ p max-width:780px; 2 P% q b6 l4 x7 r7 N2 K
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 1 G3 v+ O7 m7 r
border:1px dashed #000;
0 c0 q/ j" N# Y( ]2 I& A! K/ e! w} & s( ]* U" w- C' v
--> 2 u5 r; j1 q7 h* [! _& U
</style> , W( B3 g( s' U/ u5 d5 d! Q- B
</head> ' g+ T- h5 W3 y# d6 v# }$ z) I
<body>
" t7 c y1 w8 |0 i/ \<div id="pic"> 3 C, J1 F% E0 q: f, |8 j# b
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / ?1 K; }. q8 A, W F. Q
</div>
' \+ ^, m q( @0 }) w# S$ h8 [</body> " q: ^! ?0 q: j% ?
</html>
: c2 I; P8 N( W/ [
" L6 E) e, [- d5 n- P百分比适应:
6 t* X: T% A/ K! G/ }以下是引用片段：
7 v; W5 y9 n' o+ A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 l: @9 I- z& f6 w* b! s) T0 t$ r4 o
<html xmlns="http://www.w3.org/1999/xhtml";>
) O7 |0 K& q/ e- Z* j& K<head> $ \, D1 |* q$ g3 G
<meta http-equiv="Content-Type" c />
' ?+ S% H; T4 A+ T$ z+ k! U<title>css2.0 VS ie</title> . p- P ?: r4 m; ^
<style type="text/css">
, y8 ~& v- |, W. {0 M<!--
. m# A& Y8 E: ?( }& t Mbody {
: R8 ]' L/ ?0 |4 P( |font-size: 12px; ; S3 J- N$ T# h3 G! l! A. N
text-align: center;
/ E& u( x- m% R3 h9 p# F( Pmargin: 0px;
( c* e8 E- J1 r7 U8 D7 w, O3 fpadding: 0px; 9 p9 k, W7 ~, d4 ]2 _8 i( e0 @( |
}
. }7 A1 G( e% t6 z#pic{
; n% M# c% P9 I margin:0 auto; 5 Z; Y4 H/ N# y7 x* k- N2 s7 F- `7 E
width:800px; 9 q: m- U9 L" D. h. `7 V6 q7 `! p
padding:0;
- K+ F3 Q5 t* S' C! D border:1px solid #333; ) ]) t) e G% Q" G5 `' w: }* l! J
} # F: `/ N' }7 ~
#pic img{
3 W1 ~5 ]4 i2 t' }1 E0 I1 x0 Z max-width:780px;
( E2 @ G W+ {( M4 ]width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , W1 z% m; P+ }% N
border:1px dashed #000; . s- T6 d4 F1 F
}
5 K3 ~/ w8 F0 m) z3 Y1 r& G7 d-->
( l- U; d) l$ d0 r</style> , ? L, b+ E- o
</head> 0 f, N2 {+ ~5 R2 q2 D& m
<body>
! }1 @! a I" ]! _ h( P% C<div id="pic">
6 Q- K7 x9 M0 K, f8 [3 g<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 [% v3 r* y6 a2 ~. {; K- Y</div> " o5 k# N: Q. w8 X. n$ y
</body> ! F" N9 o2 x2 F+ ~+ V
</html> |
|
发表于 2007-12-8 14:55
| 