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

追梦子前端博客。

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. torch-ios框架XCODE使用备忘

    1.首先编译框架   ./generate_ios_framework 2.把框架包含进project  在general-link Frameweork and Libraries 加入这个框架,注 ...

  2. 页面加载完成后加载多个函数的js完美解决方案

    function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') ...

  3. shell 知识

    解压 tar.bz2文件 bunzip2 linux-2.6.13.tar.bz2 | tar xvf -

  4. display:block 不起作用

    jquery中$("#Main").css("display","none"); $("#Day").css('disp ...

  5. 实现IBatisNet的Dialect分页

    Hibernate有其独有的Dialect,对不同的数据库实现sql的分页. 用过MyBatis for Java,它可以拦截SQL语句,通过Interceptor对原始的sql语句进行修改,也就是可 ...

  6. Asp.Net Web API 2第十课——使用OWIN自承载Web API

    详情请查看http://aehyok.com/Blog/Detail/71.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  7. ASP.NET 开发必备知识点(1):如何让Asp.net网站运行在自定义的Web服务器上

    一.前言 大家都知道,在之前,我们Asp.net 的网站都只能部署在IIS上,并且IIS也只存在于Windows上,这样Asp.net开发的网站就难以做到跨平台.由于微软的各项技术的开源,所以微软自然 ...

  8. Actor的原理

    先从著名的c10k问题谈起.有一个叫Dan Kegel的人在网上(http://www.kegel.com/c10k.html)提出:现在的硬件应该能够让一台机器支持10000个并发的client.然 ...

  9. NoSQL:从关系型数据库到非关系型数据库

    关系型数据库 所谓关系型数据库,,就是指采用了关系模型来组织数据的数据库. 什么是关系模型,简单说,关系模型就是二维表格模型,而一个关系型数据库就是由二维表及其之间的联系所组成的一个数据组织. 关系模 ...

  10. 详解c#迭代器

    迭代器模式是设计模式中行为模式(behavioral pattern)的一个例子,他是一种简化对象间通讯的模式,也是一种非常容易理解和使用的模式.简单来说,迭代器模式使得你能够获取到序列中的所有元素 ...