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

追梦子前端博客。

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. 使用CSS中的meta实现web定时刷新或跳转的方法

    这篇文章主要介绍了使用CSS中的meta实现web定时刷新或跳转的方法,比使用JavaScript脚本实现起来更加简单一些,需要的朋友可以参考下 meta源信息功能之页面定时跳转与刷新 几乎所有的网页 ...

  2. PYTHON学习之路_PYTHON基础(8)

    学习内容: Python模块介绍 1.经典类 or 新式类 2.抽象接口 3.静态方法.类方法.属性方法 4.反射 5.异常处理 6.socket编程初识 7.用socket实现get.put文件等功 ...

  3. Python学习之路-Day4

    1.函数 函数定义 def  func(aa):         def:表示函数的关键字  func:函数名,即函数的名称,可根据函数名调用函数 print('.....')        prin ...

  4. MSVCRTD.lib(mfc.obj) : error LNK2019: 无法解析的外部符号 _WinMain@16,该符号在函数 ___tmainC (转)

    一.问题描述 我所使用的编程环境:VS2010 出现的问题如下: MSVCRTD.lib(mfc.obj) : error LNK2019: 无法解析的外部符号_WinMain@16,该符号在函数 _ ...

  5. mysql5.7中文乱码问题的解决,将编码统一改成utf8的方法

    修改配置文件my.ini 将其改为:(路径根据自己mysql的安装路径进行适当调整,与字符编码无关,不必改动) [mysqld] basedir=C:\MYSQL57datadir=C:\MYSQL5 ...

  6. Eclipse下Android开发错误之Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace

    升级了Android版本后,在运行应用时提示: [2013-11-27 10:37:35 - Dex Loader] Unable to execute dex: java.nio.BufferOve ...

  7. C++混合编程之idlcpp教程Python篇(5)

    上一篇在这  C++混合编程之idlcpp教程Python篇(4) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程PythonTutorial3中,同样加入了三个文件:Py ...

  8. 让你的Android程序更省电

    app主要耗电的原因如下: 1 cpu频繁的运转 -----控制线程 2  大数据量的传输----- 数据压缩传输 3  不停的在网络间切换------------判断网络状体 4 人开发的程序后台都 ...

  9. android precelable和Serialization序列化数据传输

    一 序列化原因: 1.永久性保存对象,保存对象的字节序列到本地文件中:2.通过序列化对象在网络中传递对象:3.通过序列化在进程间传递对象. 二 至于选取哪种可参考下面的原则: 1.在使用内存的时候,P ...

  10. Linux 学习笔记(一) 入门

    Shell 显示Shell类型 $ps 切换Shell $[Shell 名称]  ex. $tcsh 快捷键 Ctrl + Z:挂起,可用jobs查看到,fg恢复运行 Ctrl + W:删除单词 Ct ...