【实践】总结（2015/05/07）——关于布局和兼容的一些问题

实践总结（2015/05/07）

前言：刚刚完成了一个产品在线演示平台和产品下载中心的页面制作。从这次实践当中学到很多，所以决定将学到的东西都记录后下来，以后遇到的时候就能快速解决这些问题。

1、IE-6 下浮动的块元素左右margin大于实际设置的值

解决方案：在float：left;后面加上display:inline;

#demo{
width: 1000px;
margin: 0 auto;
}
#demo div{
float: left;
display: inline;/*解决IE6下浮动元素左右margin比实际值大的问题*/
width: 246px;
height: 280px;
margin: 0 2px 15px;
}

2、表格文本溢出的隐藏方法

为表格设置固定布局table-layout: fixed;，

然后对需要进行文本溢出处理的单元格设置以下样式，

① word-break:keep-all; white-space:nowrap;(不换行)

② overflow:hidden; text-overflow:ellipsis;(溢出隐藏，并显示省略号)

#download .content-download table{
width: 680px;
margin: 28px auto;
table-layout: fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
#download .content-download thead th:first-child,
#download .content-download tbody tr td:first-child{
width: 340px;
text-indent: 20px;
text-align: left;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一 起使用。*/
}

但是设置了表格的固定宽度布局后只有IE-6下单元格宽度是平均分配的。最终我是使用的hack来重置 IE-6 的表格布局方式，从而解决这个问题。

/*ie6*/
#download .content-download table{
_table-layout: auto;
}

3、内容超出规定尺寸时出现滚动条

我对表格的最外层容器设置了固定宽高以及overflow:hidden;，但是当表格行数过多时，就需要表格区域能垂直滚动，所以对表格的直接父元素设置了如下样式：overflow-x: hidden; v-overflow:auto;

#download .content-download{
width: 726px;
height: 480px;
overflow: hidden;
}
#download .content-download article{
height: 480px;
background: #fff;
/*如果表格超过10行，则出现垂直滚动条*/
overflow-x: hidden;
overflow-y: auto;
}

4、信息列表图浮动布局，个数不确定

演示平台页面一共有两个板块的产品展示，考虑到以后可能有更多产品，不能给这两个板块设置固定的高度，但是板块内部的内容是浮动的，所以为了设置两个板块之间的margin，又必须给它们定义一个高度，所以用了min-width来解决这个问题。

/*内容部分*/
#demo > section{
min-height: 800px;
}

5、图片比实际尺寸占的空间大的问题，以及IE低版本下图片有边框的问题

针对第一个问题，我的解决方案是将图片直接设置为块元素来显示display:block;

针对第二个问题，将图片的边框设置为0就可以了border:0;

img{
border: 0;
display: block;
}

6、标题h1~h6的文字大小、粗细手动设置不生效的问题

h1,h2,h3,h4,h5,h6{
font-size: 100%;
font-weight: normal;
}

7、点击<a>标签时外面出现的虚线边框

a{
outline: none;
}

8、css的表格边框合并

以前做表格都是直接在行内定义边框合并样式的，但是现在样式都是推荐在css中单独定义，用得不熟悉啊，记记

table{
border-collapse: collapse;
}

9、解决IE-6不支持PNG透明图片问题

首先引入一个js文件DD_belatedPNG_0.0.8a.js，然后将背景透明的图片放在下面这个方法里面：DD_belatedPNG.fix(‘.brand img’);

<!-- 解决IE6不支持PNG透明图片问题 -->
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.brand img');/*参数是透明的PNG图片*/
</script>
<![endif]-->

10、让IE支持html5标签

<!-- 让IE支持html5标签 -->
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,dataaAt,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->

11、制作CSS小三角的方法

实心小三角：一个标签，宽高设为0，设置边框颜色均为透明，三角形的大小取决于边框的宽度，尖角向右则重新设置左边框的颜色，其它方向同理。

镂空小三角（即只有边框线）：两个标签，样式做相同设置，然后用定位将两个三角形定位，错开一两个像素，靠近内容的那个三角形颜色设置为内容区域的背景颜色。

① html结构

<i class="triangle1"></i>
<i class="triangle2"></i>

② css样式

#demo .details .triangle1,
#demo .details .triangle2{
position: absolute;
width: 0;
height: 0;
left: 10px;
border: 10px solid transparent;
}
#demo .details .triangle1{
top: -20px;
border-bottom: 10px  solid #b9b9b9;
}
#demo .details .triangle2{
top: -18px;
border-bottom: 10px solid #fff;
}

结语：暂时写到这里。

——————–THE END ——————–