|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。4 i- {# k& n- ?# t' Y2 W: M
关键在于：max-width:780px;以及下面那行。2 B. a) l X: I0 {; `1 d; |
固定像素适应:
: @. X, L$ ]* h
% v! A6 _* q3 b" r3 u. L5 |: mdotted; 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 l1 c5 S V' [) m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ O ~! S7 W" S5 l4 f# ~, i
<html xmlns="http://www.w3.org/1999/xhtml";> ' R& n7 S* V1 {2 Q; D
<head> ; X. p E: c! s
<meta http-equiv="Content-Type" c />
- F4 a L0 I% R% b- c2 ~* `<title>css2.0 VS ie</title> 1 V: O" r/ I7 O0 M
<style type="text/css"> * H- A6 X4 ~* y7 n5 H; E
<!--
" T4 r5 |$ }* l- D1 Sbody {
; Z. h" L8 X8 Lfont-size: 12px;
. X5 M; h* e5 Z. A8 U/ ntext-align: center; # Y/ V/ @& T, y' s% Y
margin: 0px; ! p! f o+ c5 J! }: _ ?
padding: 0px; 1 u! g" Y8 q& @4 U7 A" N
}
$ N2 h# |+ m) i$ X; o#pic{
6 R6 |: g" O5 o8 V+ x Z$ | margin:0 auto; $ d( j& c8 |5 n% u, q
width:800px;
+ R# }' K- h3 O: o7 @6 Q7 } padding:0; ( N& P' R8 U# B4 _
border:1px solid #333;
% g; C% ~! U* O, G8 O% L* L; Q }
& F4 X! d8 h& X- ?7 c( I5 _7 z#pic img{ + w+ f/ D% C0 x9 A
max-width:780px;
! [, K1 x E' I6 Nwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); , P) s) w' o' h `& e8 v/ j* R* ~
border:1px dashed #000;
* k* |0 j' g7 g1 v S2 n0 b}
# \" I: c' e8 b( `1 K-->
- y- ]4 \% }' Q/ `( o @9 w, f7 d</style> - Q2 r* X, z4 z% w) L1 N7 P
</head> # T; r; r! u1 c( C1 S% _
<body>
) R0 f4 w {, s- \: K: h7 h" A6 {<div id="pic"> : [6 b0 N& s: d% [/ q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; d: _" B5 V- b {% F</div>
8 v9 B6 J2 q1 g3 V3 G/ w</body> % g) |( \" k o6 d2 d u$ {+ Q
</html>
+ r$ |+ a5 ]" i( G) Y4 _
& C# N7 j% |( \) w) U. _5 j$ A# X百分比适应:: U' i1 b' t; J' ]
以下是引用片段：
+ ^9 q, N0 C2 E" a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% J4 b. B; q: S4 |+ |9 d<html xmlns="http://www.w3.org/1999/xhtml";>
9 q: c8 t# Y. u7 y c3 U<head> * o! I4 j* `- |7 S0 X
<meta http-equiv="Content-Type" c />
. N- l, \- ?. K, X. m' N9 p<title>css2.0 VS ie</title> 3 a0 h1 w& a5 {1 ^
<style type="text/css">
1 i6 E! S* k% y( Q* B<!--
8 X: N0 Y2 L! A5 K3 r! k Abody {
8 w, |$ d# a: m) T" P( _3 E0 }" nfont-size: 12px;
; i7 ^" ?. O, `/ X& h% j; ntext-align: center; 9 Y* [) M4 k7 M8 L, t5 h2 G5 C3 F
margin: 0px; $ l" _5 j$ v: f3 E5 t) }! A
padding: 0px; 0 ` j) |9 q! X) h
}
' M. e# f7 K7 G; [) ?4 n#pic{ . Q. x3 x2 X, }. H8 o9 x
margin:0 auto; & y- h' e9 s7 \8 I: j X& R" |
width:800px; 6 p6 v9 t& w6 B( g
padding:0;
# D. v( A$ I9 Q3 w+ b6 T7 c9 L" d) L border:1px solid #333;
+ q/ H) X( D3 n! g8 `8 H/ z }
# _2 O' q. m4 i* a" l3 _2 @9 \#pic img{
" _1 I7 h3 ^; Z$ h: b, w5 T max-width:780px; # c g! {4 ?" v" l4 V8 L9 o! G0 s
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 c9 L6 D4 r; y3 q% pborder:1px dashed #000; # R# ]" y6 V) v
}
# p4 ?# f9 R) o& @-->
3 H. a! Z; K1 _9 i( ~+ n6 i- H A</style>
" x8 A" x4 U' B6 p</head> ' T. ?$ F( ?4 S8 _/ R6 M' B
<body> 7 U2 a1 d8 X) p' S0 R3 e7 A- [4 Z+ L
<div id="pic">
5 T' I8 k) J! c o<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% t5 S! d6 m$ c1 @+ ?$ l" `! K</div> w" s) y/ D2 Z7 j/ G2 A) R
</body> F/ ?( [ s M6 s
</html> |
|
发表于 2007-12-8 14:55
| 