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

追梦子前端博客。

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. ant 的详细的入门教程

    Ant是一个Apache基金会下的跨平台的构件工具,它可以实现项目的自动构建和部署等功能.在本文中,主要让读者熟悉怎样将Ant应用到Java项目中,让它简化构建和部署操作. 一.            ...

  2. iOS后台定位时授权提示一闪而过的解决办法

    今天做后台定位时,授权提示"允许 XXX 在您并未使用该应用时范文您的位置吗?"总是一闪而过,点不到,或者压根就不弹出.后来找到了解决问题的方法,那就是:将CLLocationMa ...

  3. Request三种获取数据的方式

    今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...

  4. styleId妙用

    styleId妙用: <html:text property="etpsBlocReg.cptlTotal" style="width: 94%;" re ...

  5. XAF 官方问题笔记

    1.How to print report direct, and print preview via an simple action? 如何通过一个按钮直接打印报表或者打印预览报表 https:/ ...

  6. Oracle第三方ado.net数据提供程序

    原文地址:http://www.infoq.com/cn/news/2009/06/oracleclient_deprecated 这项决定有部分原因是基于目前Oracle的第三方ADO.NET数据提 ...

  7. Hadoop伪分布搭建

    一.伪分布式的搭建 1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改 ...

  8. ListView用法总结

    前言 列表,它作为一种非常重要的显示形式,不管是在web端还是在移动平台上,都是一种非常友好的,功能强大的展现形式.在Android中,ListView就接管了这一重任.尽管在Android5.X时代 ...

  9. 【Hello CC.NET】巧用模板简化配置

    从 <[Hello CC.NET]CC.NET 实现自动化集成> 到 <[Hello CC.NET]自动化发布时 Web.config 文件维护> ,大神在评论里提到的方案还没 ...

  10. python post

    使用python 提交表单包括图片以及参数信息,详见代码 # -*- coding: utf-8 -*- import MultipartPostHandler, urllib2, cookielib ...