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

追梦子前端博客。

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. mysql 函数(二)

    1.space(N) 输出空格 SELECT SPACE(5); -> '     ' 2.replace(str,from_str,to_str) 讲str中的from_str 替换成to_s ...

  2. 用户 'IIS APPPOOL\ASP.NET V4.0' 登录失败 解决办法…………

    在iis管理器中-->应用程序池-->ASP.NET V4.0---->高级设置-->标识-->改为localSystem

  3. JS中可拖拽的甘特图和流程图

    甘特图: https://www.douban.com/note/441706674/ https://www.uedsc.com/jquery-ganttview.html https://gith ...

  4. 多清楚的IO 表

  5. Linux 常用工具小结:(5) lftp工具使用

    Linux 常用工具小结:(1) lftp工具使用. 这里会按照一些比较常用的功能列出,并举一个具体的例子逐一解释功能. 通常使用ftp过程是登陆ftp,浏览ftp内容,下载ftp文件,或者上传ftp ...

  6. 使用属性android:onClick,出现异常NoSuchMethodException

    在Activity中注册点击事件有两种方式,setOnClickListener或在xml中设置控件的android:onClick="gotoSecond"属性,在Activit ...

  7. 冒泡排序-java

    排序-冒泡排序 基本思想:从一端开始,逐个比较相邻的两个元素,发现倒序即交换. 这里按从后往前(从下往上)逐个比较相邻元素. 平均时间:O(n2) 最好情况:O(n) 最坏情况:O(n2)(逆序) 辅 ...

  8. iOS之NSString类中compare方法的陷阱

    typedef NS_ENUM(NSInteger, NSComparisonResult) {NSOrderedAscending = -1L, NSOrderedSame, NSOrderedDe ...

  9. [转] MySQL 查询表数据大小的总结

    一:关于mysql表数据大小 我们知道mysql存储数据文件一般使用表空间存储 当mysql使用innodb存储引擎的时候,mysql使用表存储数据分为共享表空间和独享表空间两种方式 ·共享表空间:I ...

  10. Adobe Flash Builder 4.7破解方法(绝对可用)

    Flash Builder4.7 破解方法的实践 建议:作为草根一级,买不起正版,只能先拿破解版练练手了,如果商业的话,请用正版.  具体步骤如下: 1.到Adobe官网下载FlashBuilder  ...