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

追梦子前端博客。

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. 浮动的元素,父元素的高不会被撑开。解决:清除浮动。

CSS实战中经常出现的问题。的更多相关文章

  1. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. DIV+CSS实战(三)

    一.说明 在上篇博客<DIV+CSS实战(二)>中,实现了头部以及Tab标签卡,下面开始实现内容区域,要实现的效果如下: 二.内容最外层的设计(边框) 给最外层加边框,并且设置高度随着里面 ...

  3. DIV+CSS实战(二)

    一.说明 在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名 和上次登录的时 ...

  4. CSS世界中那些说起来很冷的知识

    CSS世界中那些说起来很冷的知识 最近读了张鑫旭的新书<CSS世界>收获了不少对CSS的深度理解 也正值个人在公司内部进行部分章节的内容分享,于是顺带着直接把我即将分享的内容先给大家过过目 ...

  5. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  6. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  7. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  8. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  9. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

随机推荐

  1. React Native填坑之旅--组件生命周期

    这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...

  2. CentOS常用的文件操作命令

    CentOS下面常用的文件操作命令: cd pwd NO1. 显示当前路径 [root@rehat root]# pwd NO2. 返回用户主目录 [root@rehat root]# cd NO3. ...

  3. Cassandra对读写请求的处理机制

    1 写请求: 单数据中心: 向所有副本发写请求, 所有副本都写数据, 只要有一致性水平指定数目的节点返回正确响应, 就认为写成功. 多数据中心: 客户端发起写数据请求后, 本地代理节点会把请求发给每个 ...

  4. Effecvive Java读书笔记(一):创建和销毁对象

    I.考虑静态工厂方法替代构造器 优势:1.有清晰的方法名称,方便调用:多参数构造器易出现调用错误 2.不必每次调用都创建新对象 3.可以返回原返回类型的任何子类型 4.创建参数化类型实例的时候,代码简 ...

  5. idea中maven报错:无效的目标发行版: 1.8

    1.project.pom中修改版本 <maven.compiler.source>1.7</maven.compiler.source><maven.compiler. ...

  6. Linq to Sql 聚合查询

    //输出体重最大的同学,并要求最大体重得大于39,并按照体重大下,对分组结果进行排序. var result = from query in linq.Student group query by q ...

  7. SpringMVC入门配置和简单实现

    web.xml的配置 <!-- springmvc中央控制器 --> <servlet> <servlet-name>springmvc</servlet-n ...

  8. 技术文档--studio技术文档

    1.Google推出的毫无疑问,这个是它的最大优势,Android Stuido是Google推出,专门为Android“量身订做”的,是Google大力支持的一款基于IntelliJ IDEA改造的 ...

  9. ActionBar的使用

    ActionBar的使用很普遍,可以充当工具栏使用.本文介绍如何使用ActionBar. 1.ActionBar一般包含有多个工具按钮.所以,需要新建一个xml文件来存放ActionBar中的内容.在 ...

  10. javascript event兼容性随笔

    一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...