|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 {# x" i, E% \' g
关键在于：max-width:780px;以及下面那行。: m+ S! c/ b0 l8 o- ^
固定像素适应:
$ q, b0 M0 U, w
# h* g8 B9 O+ h0 P0 }$ Z7 H, Jdotted; 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> 以下是引用片段：
# f2 [' r, }, \& U5 e/ G<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % x2 o! `' B9 H2 z% V* J T
<html xmlns="http://www.w3.org/1999/xhtml";>
`- U( i6 [. I W8 D<head> $ Z; M J2 ^$ h! l1 y; x3 t7 b5 |
<meta http-equiv="Content-Type" c /> 4 V9 n5 j) s* t! d/ k; p
<title>css2.0 VS ie</title>
$ d, d) W5 @1 p<style type="text/css">
9 W* A6 n% x; O% U<!--
# p+ c0 h Y* U. C" h+ a; Kbody {
7 B. g: l& O+ f4 A9 kfont-size: 12px; , I: s9 \$ C: `) t" i2 g" _
text-align: center;
% `: ]: B& w# F. n2 [2 J" o: |! j0 \margin: 0px;
1 `0 N, _/ M3 u! o- F; D$ Ppadding: 0px; + |& Y' s, e* ?9 T8 i1 ~1 O- q" `
}
" {' \* r, q9 e2 n# A1 C3 t#pic{
9 Q# j0 t7 C3 B$ E+ y+ U4 z" m2 g margin:0 auto; 7 U9 o% w5 f( q q# p5 @0 E
width:800px;
" S, U3 t/ a) F6 s! S, i padding:0;
( \$ N9 q4 d* E/ c6 U2 k border:1px solid #333; 7 C9 g7 c8 d( i" `
} 1 i! f" g7 m) O% F2 f# |2 Z" V* ^% p
#pic img{ , Y7 O8 ]+ s" U4 l2 f
max-width:780px;
! @5 p0 O) W7 H! ?/ jwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
0 L$ e' F' x5 z7 l9 u$ xborder:1px dashed #000; # a0 a* T7 H i" D
} 1 N% ]% p! X4 @2 R" ^
--> , i3 Y7 @5 j$ i" x" k' @& `
</style>
; R- ^, I. c; l' a+ @% g. C</head> 3 G# @% O: D# n9 Y$ Q$ w/ p
<body>
3 w# k: d, K$ E5 t( j- S/ ?<div id="pic"> * S7 b9 Q& P, N. I, j
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
i+ k# B4 s/ i. d</div>
" H9 R0 M! F7 @) `. O6 r! ~</body> $ k7 t0 ?( [- h+ v; i }* a
</html> 1 c; y; l- k" \) G j
5 _. ^# Q0 {+ @, |百分比适应:
1 N4 L* b% o+ f以下是引用片段：
! r; o) D' h+ r/ K" k6 q, x<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 J) \5 g1 I' P4 w5 w4 P6 |
<html xmlns="http://www.w3.org/1999/xhtml";>
" a1 K, v& W9 T; t4 V0 g) w O+ ^<head>
- m% R* E& g* [3 S% Z# ]; m4 |<meta http-equiv="Content-Type" c />
% {9 }. G ?# W+ O$ B<title>css2.0 VS ie</title> $ F& |- _4 K x8 C; S
<style type="text/css"> 3 C8 T) Q0 T6 j$ x* p7 ~
<!-- . b: o* f/ c9 L: I
body {
7 F( h9 P: Q" W# p5 qfont-size: 12px;
( l( k0 }: D- \ _text-align: center; 9 R: H$ T" x( K6 Q* O% _! F+ a7 j
margin: 0px;
3 R7 u9 R2 F# i) j8 r T! Upadding: 0px;
% n& B9 S( k' k# n( e+ C. R3 \}
1 u. B" y& S# i) I#pic{
8 A2 e+ K4 K- a6 J9 T margin:0 auto;
" v, I' q- Q) k1 S% _. m width:800px; $ I8 @5 D% W* Z, k
padding:0;
) w/ E F4 D. | border:1px solid #333; ) H9 E5 O/ D4 s, v# ?% r
} . n. F3 m& m8 }/ P! M7 b! W
#pic img{
9 E2 R R2 z. L8 K" y! a max-width:780px;
% }9 j- y: u3 r7 Jwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 F+ t' D- p; r! D7 \border:1px dashed #000;
# P: b1 d9 p' b* O+ W$ p; ?# h} : c) i1 u' ~; f/ I/ e2 X
-->
7 P( A% v& Z! T( P</style>
! q, M+ z. t; Y6 w, h1 E</head>
5 j( v3 w1 r# L/ w M<body> ' Q1 H- e0 H- K* Z5 M
<div id="pic">
7 `0 W! Q; E7 I( m# ^# s! ]3 F; ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ a/ p4 D( [; A" ^2 q$ v- W</div>
* c4 l. Y3 ?: x! r</body>
% |/ ]8 ], |9 o0 W; m</html> |
|
发表于 2007-12-8 14:55
| 