CSS实战中经常出现的问题。

Posted 2020-07-03 追梦子

如果你把这些当做文章来看，那你始终是学不会，而是应该当做手册来看，这些也是自己在写网站遇到的问题。转载请出处。

追梦子前端博客。

1. logo添加内容给h1设置text-index:-9999px的时候会把里面的其他标签也给定位过去。
解决方法：如果要添加内容，那么图片用背景来做。

 

2. button高度问题
button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部，所以在text和button上同时设置边框就会得到button的高度比text小的现象。所以文本框要与button按钮对齐，button的高度是要高于文本text的高度的。（button的高度包含边框的高度，而文本框text则不包含边框高度。）

 

3. opacity透明度问题
如果父元素使用了opacity那么子元素也会被透明，如果不想让子元素透明，那么就弄一个空的元素，给这个空的元素设置opacity而不是给父元素。如果即要加背景图片又要加透明度，那么需要添加两个元素，一个加背景，一个加图片。

 

4. 在IE7中input为submit时如果有边框会出现一条黑色的边框，解决方法，在input外面套一层标签，然后给外面的那一层添加边框。

 

5. ie低版本按钮单击以后出现虚线，通过outline:0，去除。

 

6. z-index问题
如果出现覆盖不了的问题，那么可以通过给想要覆盖的元素添加背景颜色。

 

7. a标签中使用img后的高度多出几像素解决方法
这个主要是因为img是行内元素，它的下边缘默认是与基线对齐的,将img标签display设置成block

 

8. 当父元素没有设置高的时候，如果发现子元素没有被父元素包含，那么可以通过overflow:hidden来解决。

 

9. 一旦出现问题的时候，尽快解决，如果是要将代码重用，一定要考虑后面的代码。

 

10. 模块化CSS代码，把公共的元素取单独的class，好抽离。

 

11. 在css中没有colspan，单元格合并，需要在html中直接设置。

 

12. 浮动的元素，父元素的高不会被撑开。解决：清除浮动。