使用CSS修正一切：20多个常见Bug及其修正方法

来源：互联网发布：淘宝哪家多肉土好编辑：程序博客网时间：2024/05/17 08:43

毫无疑问，一个合理的布局和结构是最好选择。这不仅是因为你的布局在不同浏览器见表现不同，而且还因为的CSS有很多方法来布局你的每个元素。今天，我们希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。

IEBug修正

1- Bug修正：IE双倍Margin bug

- 元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以，你只是把例如这样的代码：

#content {

float: left;

width: 500px;

padding: 10px 15px;

margin-left: 20px; }

改为如下代码 :

#content {

float: left;

width: 500px;

padding: 10px 15px;

margin-left: 20px;

display:inline;

}

2-克服盒模型hack

- 如果你想给任一div指定宽度，不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。所以，不要这样做：

#main-div{

width: 150px;

border: 5px;

padding: 20px;

}

这样做:

#main-div{

width: 150px;

}

#main-div div{

border: 5px;

padding: 20px;

}

3-IE无视min-height属性

- min-height属性在firefox下表现很好但是IE却无视了它，IE的height就像FF的min-height.注意：IE7没有这个bug。

/* 对主流浏览器 */

.container {

width:20em;

padding:0.5em;

border:1px solid #000;

min-height:8em;

height:auto;

}

/* 对IE浏览器 */

/*\*/

* html .container {

height: 8em;

}

/**/

4- Min-Width for IE

-一个IE的min-width缺陷的修正。

块级元素居中

5-块级元素居中

- 有很多种方法可以使块级元素居中；选择哪种方法取决于你的百分比大小设置或使用更绝对的数值。

整个页面内容居中：

body{

text-align: center;

}

#container

{

text-align: left;

width: 960px;

margin: 0 auto;

}

6-使用CSS垂直对齐

- 如果你想知道怎么才能正确的实现垂直对齐，只需要简单的为你的文本指定和容器等高的line-height。

#wrapper {

width:530px;

height:25px;

background:url(container.gif)no-repeat left top;

padding:0px10px;

}

#wrapper p {

line-height:25px;

}

栏目问题

7- 你的CSS栏目被搞乱的最大原因

-一个容易理解的就如何解决普遍的CSS栏目的问题的有用的图解和代码片断的文章.

8- 扩大的盒子Bug

- 当您尝试创建一个两列浮动的布局， IE浏览器将创建一个“浮动下降”，这是由于在一个固定宽度的浮动DIV内存在超出宽度的内容，这些内容必须融入布局中的一个特定位置。这片文章详述了几种可能的替代方法。

CSS定位

9- 理解CSS定位Part 1

-一系列很有趣的文章，这些文章不仅包括定位，还包括包括定义布局的属性，比如display和float，和对CSS3布局模型的一个预览。第一部分将会介绍定位和display属性。 Part1, Part2, Part3 将会带给你对定位的更深的理解.

10- relative和absolute有什么不同?

- 对于刚开始使用CSS的人来说，无论相对行为还是绝对定位都是非常令人沮丧的。这个问题的答案将会让你的迷惑变的清晰些。

#redSquare

{

position: relative;

bottom: 40px;

right: 40px;

}

显示这样:

11-HangTab(固定标签)

- 在浏览器边缘创建一个固定的标签(即使内容居中)。查看Panic’s website fortheir software Coda.

#hang_tab {

position: absolute;

top: 7px;

left: 0px;

width: 157px;

height: 93px;

}

CSS浮动概念

12- CSS浮动原理：你应该知道的事情

- SmashingMagazine 浏览几十个相关文章，并选择了在用float开发基于CSS的布局时你应该牢记的最重要的东西。

<div style="float:left;width:30%;"><p>Some content</p></div>

<p>Text not inside thefloat</p>

<divstyle="clear:both;"></div>

</div>

13- Floatutorial:CSS float的简单教程

- Floatutorial带你查看浮动元素的基本原理，例如图片，下拉菜单，下一个和返回按钮，相册，内部列表和多列布局。

14- 清除浮动-正确的方法

- 清除浮动可以说是CSS开发中的一个最令人沮丧的方面，最佳方法之一是在您的网站上使用EasyClearing .

/* EasyClearinghttp://www.positioniseverything.net/easyclearing.html */

#container:after

{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

#container

{display: inline-block;}

/* Hides from IE-mac \*/

* html #container

{height: 1%;}

#container

{display: block;}

/* End hide from IE-mac */

更简单的圆角实现

15- 迈克询问CSS圆角建议

- “最简单的方法是使用一个大的gif图片，然后我将给我的盒子编码”

<p>beautifully-encapsulated paragraph</p>

</div>

“并给它添加背景”

.roundBox {

background:transparent url(roundBox.gif) no-repeat top left;

width:340px;

padding:20px;

}

.roundBox .boxBottom {

background:whiteurl(roundBox.gif) no-repeat bottom left;

font-size:1px;

line-height:1px;

height:14px;

margin:0 -20px -20px -20px;

}

同样 Askthecssguy 介绍了 Google Analytics中使用的技术, 他是通过在每个角留下1px的边框来实现圆角的效果，这是一种不用静态图片实现圆角的新方法。你可以在这里查看一个示例.

16-3个简单的步骤实现圆角

- Alen Grakalic研究了通过三个步骤来编写一个固定宽度的圆角布局.他也创建了一个 demo .

CSS表单问题

17- 创建伟大的网页表单的技巧

- Cris Coyer和我们分享了浮动标签，:focus伪类，使用建议等技巧。他同样建立了又好又简单的联系表单,他首先将它发布在这里.

label {

float:left;

text-align:right;

margin-right:15px;

width:100px;

}

18- 简洁而纯粹的CSS表单设计

- 对于的CSS爱好者来说，本教程表述了一个如何设计纯粹的CSS表单而不使用HTML表格的建议。你可以在这里抓取代码.

19-用javascript自动填充文本输入框

- 有时候，我们需要向用户解释他们理应填写文本输入框。当没有标签可以显示，一个通用的解决方案是，把一些占位符文本放在文本框中，并让它当标签来用。本教程介绍了一种很好的解决办法，并启用JavaScript，label元素是隐藏的，而且input元素的title属性值被复制到value属性.如果已禁用JavaScript，标签显示在被留空的文字输入框的上面。一个简单的演示，您可以在这里看到演示.

值得检验的css技巧

20- 跨浏览器的用背景图的水平线

- 你或许想使用一个定制的图片来创建一个跨浏览器的水平线作为内容的分隔。

div.hr {

background: #fff url(myhrimg.gif) no-repeatscroll center;

height: 10px

}

div.hr hr {

display: none

}

你的代码可以像这样:

0 0