|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14439
- 金币
- 2505
- 威望
- 1647
- 贡献
- 1453
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 i5 e: U8 f0 {' @/ Z8 O关键在于：max-width:780px;以及下面那行。9 z! w8 Y% z7 \! l6 p
固定像素适应:6 _; H$ b* v( _: Z
% G) X1 G+ V h$ Sdotted; 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 B' z; Q( e5 F' h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / [% ]9 L) p$ W& v: n9 w* F
<html xmlns="http://www.w3.org/1999/xhtml";>
: W2 m+ D- w# e: g- c$ Y. Q+ n<head> 0 ^( d6 \/ h+ r$ }3 r4 Q
<meta http-equiv="Content-Type" c /> " s2 p/ E! ~) G/ B
<title>css2.0 VS ie</title> 1 i3 O' q! @) M8 {! F+ N' S
<style type="text/css">
% g. j! ~9 D! @$ J<!--
4 d' x5 v) I8 E$ d) g% x( vbody {
/ s& u0 j6 L \- O0 ffont-size: 12px;
: ?4 {; v! f' a. |8 Utext-align: center;
) l: E$ ?$ u% h& p- ~8 f& n) cmargin: 0px;
& Y" `. I" O( e1 d2 ^, lpadding: 0px; 7 [. S- H6 N' t4 Y% `
}
; N+ |( |2 D) x* e- @#pic{ 1 i* w! P( L8 m! t! @
margin:0 auto;
, e. Q1 ~# Z0 B, S; q- I2 C8 Q width:800px; - m+ @9 {/ Y' P. k3 z
padding:0; ; ]6 n; h5 Q9 A/ W
border:1px solid #333; 8 ]6 I" A+ [* a
}
' d# b, {+ {, P! r/ Q3 O, O$ o#pic img{
+ j* g- s2 o& `4 x* d max-width:780px; " N; e+ m' W: ^0 F# K5 j
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& w3 L+ Y8 _3 ?$ Fborder:1px dashed #000; . E1 m% }$ X2 z5 k. z
}
% \; Z- a# Z: t4 P* A, b-->
- c" ?( U& u, _# U( k \</style> ; x5 R+ y. L2 q/ k4 R- _- Q& a
</head> / o) w i( p$ x I$ a
<body> 9 {9 [) w/ N. g( K# _7 N
<div id="pic"> ( K. C u; n) E. j" D/ ^! E/ _6 e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 g# `6 v x8 x/ J; h ~</div> 6 T5 I0 j" g1 {) P
</body>
! P5 j k' _; V# o1 k</html> 2 _1 {7 J {# ^" E5 l
+ c" G" B2 P V! O' g百分比适应:2 s, g" ]8 M3 K. r# {: w
以下是引用片段：4 V& b- g% U! x' |! N2 P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> p% w, D8 S# Q# |! E
<html xmlns="http://www.w3.org/1999/xhtml";> 1 e4 Q+ H" u. i) [
<head>
2 s' L f y- h<meta http-equiv="Content-Type" c />
2 T" u1 _2 M, C! i<title>css2.0 VS ie</title>
/ {+ s; Y4 ?) m' } f Y<style type="text/css">
/ a3 r" k8 {6 G1 a7 i<!-- % }4 A; \' l: }7 E- r3 F
body {
" J' r* b8 Y* e6 X# w1 Pfont-size: 12px;
" u& w3 y9 D' t1 b" Y$ S9 jtext-align: center;
( ~7 S- W/ [6 b* nmargin: 0px; Y. t. p# {2 Z H! V
padding: 0px;
! g4 b1 {/ I: k5 Q2 c# ?* O}
1 X# k) _# N" h+ x% X2 ^7 S#pic{ ! n; I. e1 M% B) b
margin:0 auto;
5 H3 b- j; Z4 E width:800px;
7 P3 R/ z% K6 l4 _ padding:0;
# O' l( M3 }, S) I border:1px solid #333;
1 [0 t( M- z! ~ K" H9 r } : e% f, x% m! } ]' q8 X) v
#pic img{
* {1 }9 A0 j" F max-width:780px; : e' F3 A3 V+ H3 j7 m# x+ P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' _) V. p& A9 W9 ^; |border:1px dashed #000;
9 r! ^3 l( c7 u2 y}
$ W2 p! W' X6 |# \7 q) a-->
( r3 ]" ^. A* N</style> 3 }# `% m- n4 }/ X: G R
</head>
' r' [1 Y: p1 L( Q4 R; f<body>
) C* `) d' w. ^3 w; m# x8 F, w" y4 h<div id="pic">
$ R+ D5 s; _: o, W$ w! h6 a<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , x$ B4 T7 f3 r
</div>
' A+ d* z" U) m$ w7 R4 H5 T9 z</body>
0 q% x$ I% ^2 I F' T</html> |
|
发表于 2007-12-8 14:55
| 