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

2017-01-07 19:11:49来源:CSDN作者:katara1109人点击

背景:
在开发项目中,常常碰到小问题。如,1.明明一行的文字和图标,偏偏不垂直对齐,2.对表格明明设置了宽高,为何不起作用 3.这图标的间距,为何比我设置的数值要大的多 等等。这些问题虽然小,但经常导致同事因为这个耗时很久, 也不容易解决的。现将在**工作一年中,遇到的问题及其解决方法进行总结。目标:总结将工作中常见的问题及其解决方法。
由于篇幅有限。Bug出现的原因能简单述说的就述说,一两句话说不清楚的,就不进行解说了。
并将工作中,若碰到问题,该如何排查。
一:纯图标和文字一行显示的问题。
问题:明明一行的文字和图标,偏偏不垂直对齐,如: 。
代码:<a></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去定义高度。实现内容过多时候滚动。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台