2015年， 常见页面问题及其解决方法--css篇

背景：
在开发项目中，常常碰到小问题。如，1.明明一行的文字和图标，偏偏不垂直对齐，2.对表格明明设置了宽高，为何不起作用 3.这图标的间距，为何比我设置的数值要大的多 等等。这些问题虽然小，但经常导致同事因为这个耗时很久， 也不容易解决的。现将在**工作一年中，遇到的问题及其解决方法进行总结。目标：总结将工作中常见的问题及其解决方法。
由于篇幅有限。Bug出现的原因能简单述说的就述说，一两句话说不清楚的，就不进行解说了。
并将工作中，若碰到问题，该如何排查。
一：纯图标和文字一行显示的问题。
问题：明明一行的文字和图标，偏偏不垂直对齐,如： 。
代码：<a class="ny-icon-btn i-add"></a><span>编辑</span>
原因：所有标签的默认其属性是vertical-align:baseline; 当标签中没有文字时，浏览器会自动为其预留一定空间，导致旁边的字，有下掉的感觉。
解决方法：有3种：
1.对图片标签设置：vertical-align:middle; 对文字设置下属性：line-height:*px;(为其高度值)和vertical-align:middle。
2.当不对图标设置vertical-align时，对文字标签设置vertical-align:top;
3.将span中的文字放在图标的标签里。如：编辑
建议使用：第3种方法。若必须分开写：应对图片设置属性：vertical-align:middle;对文字设置：line-height:*px;(为其高度值)和vertical-align:middle
这3个属性一个不能少，才能确保所有浏览器，任何时候，都ok.如图

二：对表格table的td明明设置了width，为何不起作用?
解决方法：可能你的表格被设置了：table-layout:fixed; 去掉此属性即可
原因：表格默认自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。
三、input标签，在各个浏览器上大小显示不一,甚至在一个浏览器中，input输入框与文字混排， 显示也存在差1~2px的问题。 还有里面的文字垂直居中的问题，都存在浏览器兼容问题。
以前的统一解决办法是，不设置高度，其默认高度是18px通过padding值去控制。
值得高兴的是html5很好的解决了这个问题，而且主流浏览器都能适用，就是设置input的属性：box-sizing:border-box;
四、为何设置了vertical-align:middle;却不能实现div垂直居中；
因为此属性只对父元素为td 和th有效；
在ff 和ie8下，可通过设置display:table-cell，去激活vertical-align的属性；
解决方法：将行距line-height设置值等于其height值。
五、明明设置了宽高，却不起作用：
解决方法：看看是不是该标签属于行内标签。行内标签的的宽高是不起作用的。解决办法：设置display：inline-block；顺便提一句：常见的行内标签：a span ；
六、当宽度有限时，文字溢出部分用省略号表示，鼠标滑过显示的写法：（下面的属性，一个不可少 ）

.road_name_list {width:100px;    overflow: hidden;    -ms-text-overflow:ellipsis;    text-overflow:ellipsis;    white-space: nowrap;}.road_name_list:hover{    overflow: visible;    -ms-text-overflow:ellipsis;    text-overflow:ellipsis;}

多行：
方法1

display: -webkit-box;//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

方法2：主要是解决ie8等低端浏览器的。思想是使用图片 哈哈哈

p {    position:relative;    line-height:1.4em;    /* 3 times the line-height to show 3 lines */    height:4.2em;    overflow:hidden;}p::after {    content:"...";    font-weight:bold;    position:absolute;    bottom:0;    right:0;    padding:0 20px 1px 45px;    background:url( ../ellipsis_bg.png) repeat-y;}

七、设置的margin值，为何和设置的不一样？

解决方法：
1.看看附件的标签的margin值是否重置了。（因为每个标签都有默认的margin值。）2.该标签是不是设置了浮动，若是，需要对其父元素清除浮动。（记住，任何时候，设置浮动时，都需要都其父元素清除浮动）清除浮动的方法有3种。咱们的项目中对父元素增加叫cf的class名就可以了。因为我一把方法写在.cf中了。
3. 若不是上述原因导致，就可能是因为父元素标签和子元素标签之间有空格，产生了多余的空隙。解决防范： 置其父元素 font-size:0；letter-spacing:0
4.chrome浏览器 有自带的-webkit-margin-before -webkit-margin-after清除掉

八、项目中 ie10 ok的问题，ie8却不行了
这类问题，有好多原因可以导致，但最先应该做的是解决统一性的问题。那就是咱们设置ie8，打开项目的文档模式是标准的模式， Not其本身默认的怪异模式了。解决办法：看看是不是该项目使用了以前html4常用的文档格式模型，如：，此模式所有浏览器均能识别。 然后加上 该标签的其他属性和意义，请查看的我的博客：http://blog.csdn.net/katara1109/article/details/49156725
九 、明明只想背景半透明，却导致了里面的文字也半透明了，怎么破？
很简单，只要在文字容器中加个position:relative，且背景色和透明度在父容器中。
顺便提一句透明度的属性值应按如下方式写，才能保证良好的兼容性：
opacity: 0.57; /* Firefox, Safari(WebKit), Opera)
filter: “alpha(opacity=57)”; /* IE 8 */
filter: alpha(opacity=57); /* IE 4-7 */
zoom: 1; /* needed in IE up to version 7, or set width or height to trigger “hasLayout” */ }

十、有C++ 控件，层级问题的怎么分配。
这个问题是地图项目中遇到的，较为复杂。这里说下解决办法，引入iframe。 说下各自的层级关系
同类的层级是可以通过z-index来控制；但非同类之间的层级的关系：
c++控件>div；iframe>c++控件； 但div 是可以遮挡iframe的。即咱们通过iframe包装下控件，就ok了。
具体原因，及其详细解决方法。，请见我的博客：http://blog.csdn.net/katara1109/article/details/49093837

十一、实现div水平居中的办法
有3种：1. margin-left: auto; margin-right:auto; text-align: center;必须设置text-align，否则在IE中会居左。
2.居中就是要先找到中间的位置，再偏移一定的像素。假设宽度为900，设置如下：left: 50%; margin-left: -450px;
3.采用浏览器宽度调整定位：left:expression_r((body.clientWidth-900)/2);
这个不如第二个办法好。并且在IE中不灵光。如果用jquery的话是可以的。
4.text-align：center
十二、表格中的内容换行问题：
解决方法：禁止换行：white-space:nowrap
强制换行：word-wrap: break-word; word-break: normal;
十三 、不同css冲突问题，
先要了解每个css的样式优先权问题。
1应用到页面的4种方式的优先权：行内样式(内联式 内部样式)>内嵌样式（嵌入式）>外部链接样式>@import导入方式（不推荐使用）。
2选择符的优先权：行内＞id＞class＞标签选择符tag（经测试!important(提升权限)关键字各大浏览器都支持(IE6.0不支持)）
建议使用权限较低的外部链接样式 + class 去写样式。这样当你有新的需求时，较方便的替代以前的样式。
十四、a标签内不能有a标签的子元素；
十五、居中的几种方法：
.水平居中
1 内容居中text-align:center;
2.子盒子margin:0 auto;
3.使用table布局+text-align:center。table td
4.对父元素定位，子盒子绝对定位+left:50%+margin-left:-(父width/2);
5.父盒子定位，子盒子绝对定位+left:0+right:0+margin:0 auto;
垂直居中
1. 内容居中：padding上下值一样；
2. 内容居中：Line-height等于height;
3. 使用表格布局方式+vertical-align:middle;
4.父盒子display:table；子盒子display:table-cell ;vertical-align：middle;
5.子盒子：绝对定位+top:50%+margin-top：-height/2；
6.子盒子：绝对定位+top:0+bottom:0+margin：0 auto；
7.居中盒子前增加一个同级的空盒子。设置该空盒子：浮动+height:父盒子height/2;margin-bottom:-(居中盒子height/2)。居中盒子清除浮动
8.居中盒子后增加一个同级的空盒子。设置该盒子和子盒子：display: inline-block; vertical-align: middle;。和空盒子：height:100%
十六、解决input 在chrome下 浏览器 有自带 黄色背景的问题：
1.

使用autocomplete="off" 或者    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {   -webkit-box-shadow: 0 0 0 1000px white inset;

十七、解决 input 高度的计算不统一问题：
使用-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
box-sizing : border-box ;
height : **px ;

十八．CSS的继承性
Padding Margin background border width height float的属性都是不能继承的。 Color 具有。
CSS的特性值，特性值越大越具有优先权

十九、书写顺序；
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

二十、Table:
1.必须定义width，才能实现内容文字 受限 ；
2.不能定义height，定义高度，假如内容不足 则行高平均分配；
故在table外面套一个div; 通过这个div去定义高度。实现内容过多时候滚动。