编码常见问题以及心得总结

2019独角兽企业重金招聘Python工程师标准>>>

      div+css是现在网站标准常用术语之一，我们之前通常喜欢用table的定位技术来实习各种定位，现在我们比较喜欢用div+css来定位。div是标签，承载的是内容，而css是层叠样式表，承载的是样式。

       div从开始到结束标签之间的内容是用来构成块的，中间所包含的元素的特性要么由自身的div属性来控制，要么是用css来帮忙。

     从很多时候用的div和css来看，还是有很多的快捷和方便之处的。下面来看下div+css中遇到的一些问题

     div+css 常见问题

     1.为浮动元素使用display:inline;

　　浮动元素会有一个著名的IE6.0双边距。假如你设置了左边距5px但实际上是10px左边距，display:inline可以解决这个问题，尽管它不是必需的，但是css仍然有效。

　　2.去掉网页链接上点击时的虚线

　　方法1：在标签中加入onFocus="this.blur()"语句：

　　try方法2：在标签中加入hidefocus： link

　　方法2：如果连接太多，可以用外部链接 .HTC 文件。

　　如，blur.htc 文件内容如下：

　　在 CSS 中加入如下代码：

　　A { behavior:url(blur.htc); }

　　方法3：使用CSS样式，可加入代码：

　　a {blr:expression(this.onFocus=this.blur())}

　　这样，站内所有的文章都实现了无虚线效果了。

     3.利用标签把图片放进表格单元里面，并注意到在图片下方有不需要的空间，那么设置它的display属性为block.

　　4.text-align可以被继承，vertical-align属性不会被继承

　　5.IE6.0图片下产生空隙

　　解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block。或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom。还可以设置父容器的字体大小为零，font-size:0;

　　6.使用position:relative;

　　设置一个标签的position:relative;可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架，当然你要小心，绝对位置放置的子元素是否都参照找到新位置。

      7. 图片产生的间隙
         父元素直接包含<img>，这个图片下方会和父元素边缘产生间隙。这时有两种解决方案

       1.在源代码中让</div>和<img>在同一行，因为那个间隙是由换行符产生的。
       2.给<img>添加样式  display:block;

      8. div高度自适应问题
       很多时候，给div设置固定的高度不利于页面的优化，这个时候就要让高度自适应div的增长，但是IE6如果内容的高度超过父元素的高度，父元素的高度会增加。FF2 : 如果内容的高度超过父元素的高度，内容不会隐藏，父元素的高度也不会增加。解决方法为：（假定最小高度为50px）在父元素添加  min-height:50px;
height:auto !important;height:50px;

       这里简单罗列下会遇到的小问题，当然在编码的过程还有遇到很多页面兼容性以及结构不合理性问题，不在详细罗述，跟多的详细查看之后所写的有关页面bug解决方法

 

转载于:https://my.oschina.net/anny1987/blog/179766