|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14385
- 金币
- 2478
- 威望
- 1647
- 贡献
- 1426
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。& B* C- E M8 F W# D2 O
关键在于：max-width:780px;以及下面那行。5 c' C. B! x" T4 L+ V
固定像素适应:' e: B7 @! f( O$ r/ x' }
) ?, a1 p) D) ^
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> 以下是引用片段：. e$ C* E" D. p& O1 t+ n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 L! Z, c* D7 v+ }( I) [<html xmlns="http://www.w3.org/1999/xhtml";> * o' X1 v, ]0 `/ q/ U* q/ U, r
<head>
4 L, n2 N- P" D# `<meta http-equiv="Content-Type" c />
" s& ]9 r+ d( b+ T1 z7 i# Y2 ^* y<title>css2.0 VS ie</title>
* J+ _( N# ^" X<style type="text/css"> 9 q' W/ x" G0 t
<!-- " v3 `+ d+ Q, m
body { 9 U; L. Q% |+ S% H6 ?% `( D: _
font-size: 12px; ! B% T% J/ B+ `/ p$ D J1 o( g
text-align: center; " O4 O6 G w7 E; E1 f8 e( z. p
margin: 0px;
9 S! N+ e: g+ `5 r: ]" u4 [: |padding: 0px;
9 ]3 z2 ^3 L7 L \! S, h} 3 D. C6 i. w' ?! S( z; j0 E
#pic{
* b( i7 y' P" i1 @, Y5 p1 z margin:0 auto; ( F$ j- [7 h! l' C, F1 f& J& _
width:800px;
- I5 O4 \7 D; n6 e: z3 D padding:0; - }+ z1 m& p! ]- x- W4 a% f
border:1px solid #333; 0 i( o7 t; c9 j; K T
} W2 F* U! a4 k) O, S# l3 V
#pic img{ 3 r' p0 t+ R& Z8 G
max-width:780px; 2 e1 r, k/ e. j; m: c
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! u) A" H. B. B1 Z, F# uborder:1px dashed #000;
( Y& y7 k- u0 S7 a}
6 J X% S7 X) j+ F-->
5 t* N+ N9 P8 I</style>
7 H# P7 y, |- e) P</head>
6 U2 r) N5 Y' _! @; L<body> 4 u4 x' O4 r \- M
<div id="pic">
1 p9 Y m1 d& l<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 \" f2 M+ y0 e: e: Z
</div>
9 m: T W# a0 `4 }</body> 9 [$ Q( Q0 s e8 V+ I E+ v
</html> 7 D/ f2 v+ y$ u) f4 d0 o0 X0 T/ ^
/ p$ k! K3 R: Q" H7 n3 ~百分比适应:
. B5 n& l3 e9 A' T以下是引用片段：
0 P6 Q2 S `. w& @- S7 G<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# t, Y1 }6 h# G6 q0 Q<html xmlns="http://www.w3.org/1999/xhtml";>
3 L* ]0 @" F) ?* t! N<head> . k8 W" Q/ i: @6 E7 C
<meta http-equiv="Content-Type" c /> 8 n( X4 f% Q) g1 h$ y: v0 ~
<title>css2.0 VS ie</title> 9 f2 H% v, b }# J3 m" Y6 X
<style type="text/css">
2 Q1 a6 p+ a8 g8 y3 N0 W9 T& ?<!--
- _4 h2 }) R* x8 ?" Tbody {
" u. d/ S$ D4 ^; B$ O: S2 ^/ G% Xfont-size: 12px;
0 f- h- m8 L. [; w7 n/ ]- ^# Mtext-align: center;
" N1 L1 x' b$ E- Q/ J! amargin: 0px;
" A- ^& X, l0 b& _6 rpadding: 0px; 0 ~3 x+ \+ Z. ?% |+ B- h) ~, W5 S
} 2 h0 w7 ~ q+ M3 [
#pic{ 4 j) b, O* B- f
margin:0 auto;
' Q# ?: v& C- X. k; c1 F width:800px;
; J8 X* B. U+ k m9 U* } { padding:0; , h; F9 W4 w6 @' j" i" `- w
border:1px solid #333;
* F& A! W2 `+ W7 R+ n } % x& ^5 ]& m4 V5 J' M6 n- e4 H N
#pic img{
: Z) p0 m' A4 x max-width:780px; # p7 m+ b/ P, x; l2 m& k1 E9 {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); * E a4 E; M, j) \8 S* S
border:1px dashed #000;
! w& \1 e! J; B; `" G3 W} 2 y( y( R, h- \: Y
--> - k( U5 y0 |8 r
</style> / `3 `+ }& F8 s Y% Q4 o
</head>
5 O; M4 I9 }5 Q9 \3 b# |<body>
5 I0 U$ S) ], @<div id="pic">
# v' Q$ w5 _ G& e: @<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ w% r" N$ \: }: Z
</div> _* r2 v$ _+ ~- w" ]
</body> 7 s7 e/ K, |/ S0 b) n
</html> |
|
发表于 2007-12-8 14:55
| 