|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14411
- 金币
- 2491
- 威望
- 1647
- 贡献
- 1439
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 o6 w" ~ \1 o, x关键在于：max-width:780px;以及下面那行。
% x7 d v I) C! e: H固定像素适应:
6 d% l! M \2 q+ _3 Q2 N' @5 Z, A" e ~( y
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> 以下是引用片段：
# Q% j5 r1 G0 I! S# v Y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! F- n* e; {6 b% e4 P8 ^ R
<html xmlns="http://www.w3.org/1999/xhtml";> 4 S3 B8 a/ F; `% B7 g V% ]
<head> 9 o9 h' b1 p$ t
<meta http-equiv="Content-Type" c />
$ }" A+ ^- c% n& F( c [$ _<title>css2.0 VS ie</title> + s- l- @; ]4 }# U/ c! H4 |/ L1 T* \
<style type="text/css"> 2 T: d1 `% N+ x/ H6 S& y
<!--
$ D- q- Z2 o4 K4 j8 x9 Vbody { ! B/ [0 `% c. s6 ~3 R; S
font-size: 12px;
" c) q# F& B0 N! O# M8 `text-align: center;
" O8 f% z( E0 a5 ]" Imargin: 0px; , {, ^. \4 t9 D9 W
padding: 0px;
% ~' O" D0 z2 b8 g}
1 N0 D( q+ n; {1 i+ i/ y#pic{
) w' V/ F% K a5 D2 `: ]* T3 n( w6 D2 h margin:0 auto; , ^0 A! i* C0 v$ a% S
width:800px; % P- I5 ~9 V( u+ B# w$ P
padding:0; , ~" b6 W+ R v; k9 ^$ R* p
border:1px solid #333; , O6 [, E1 i$ X
} 5 f2 e# u* \: i! t& M$ \- o/ ?, r
#pic img{ 7 U9 I A8 X5 e. X' @
max-width:780px;
* B5 a8 k D8 d8 S' a8 twidth:expression(document.body.clientWidth > 780? "780px": "auto" ); . y6 ]' Z2 Y8 d' U9 R. R
border:1px dashed #000;
( |! V7 m# v( j; r" z}
% p" e% y! f; p2 Y--> ! B+ Z3 c! A' ?
</style>
0 S H8 @- h3 S/ {: a: P3 X</head>
8 C `2 H, E9 Z6 Y) H5 h<body>
! r3 j: w7 L* F* U+ d4 K<div id="pic"> - m1 W9 o, e/ n5 ~; p% S3 L: f
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# J$ {8 m: O5 @: x7 o0 t</div> % i" {9 J. x, y
</body> # S& |% c- b' e' s8 _
</html> + @. D8 e$ U9 P$ w
, }% D! G5 V5 K% D4 Y. x百分比适应:
8 o" B( T3 {# _以下是引用片段：
" m3 c" [0 f# B<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
N: o8 t( Z2 [2 s- Y9 f% D1 m<html xmlns="http://www.w3.org/1999/xhtml";> ) R* N' O- b+ {1 n- P$ h/ l1 I
<head>
! D4 K! u* A& T7 F: a<meta http-equiv="Content-Type" c /> $ D! m" w9 W3 B' Z! n
<title>css2.0 VS ie</title>
. _" b! F E6 s! A2 e<style type="text/css">
5 {9 V. p7 Q0 u3 v3 e, s<!-- & _0 h% |1 C! _
body {
2 q7 }2 q3 r1 u( Qfont-size: 12px;
! m+ y. v( q8 p3 Y% k& a% ?9 ?: U; Rtext-align: center;
) n- d5 `" d! Wmargin: 0px; 4 x/ _6 h7 s6 Y
padding: 0px;
" x; |: q0 _( c7 g} 9 Z# [/ V4 L1 B% d5 Z9 L+ A# y
#pic{ " z& h% t& ~0 c" h
margin:0 auto; 3 C `' Z- g* ~: `0 g
width:800px; K4 P5 ~- N6 X8 Y3 c) \
padding:0;
, M) d: a. v, h0 \: n+ _4 q2 m X( o border:1px solid #333; ( L; N& b3 ?% M, u3 `
}
6 l0 T V% |; t, b#pic img{
5 i0 b" S+ O2 w max-width:780px;
, `/ I/ h+ k+ T8 m% z, Awidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" L) G+ X( B: \( G4 `border:1px dashed #000;
6 w" N; ~+ N5 i: z; O}
) W5 A2 @; |# U--> 6 K: O9 s) U, A
</style> ! \0 S, E; I/ j- C, `( q0 j; D
</head>
# L, k4 d& L; g( z; Q+ |8 P0 }% C<body>
; }4 Y; e- R: a' j( [: s% _<div id="pic">
5 `7 D3 E5 [# g. g<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: y. X& F0 U# o</div> 9 M2 d6 m. U0 f! V( } D" x
</body>
2 c; Y. }4 G' v; N5 g5 D</html> |
|
发表于 2007-12-8 14:55
| 