使用20个CSS来解决常见错误和修复
毫无疑问深圳网站制作，一个逻辑结构的布局是最好的方式。不仅因为浏览器之间的布局不同，而且CSS也有很多方法来定位每个元素。今天，我们想和大家分享一些关于如何在创建CSS布局时避免易犯陷阱的快捷技巧。

这是本系列的第一部分，因为有这么多好的技巧，如果你看到一个更容易或更好的方法，然后发表评论或电子邮件给我。我会尽我最大的努力把它包括在我们的下一篇文章中。

IE浏览器的bug修复

1 -错误修复：IE双边距浮点错误-这是一个Internet Explorer专有的错误，其中一个元素是浮动的，并给予保证金在同一个方向的浮动-结束了两倍的指定保证金大小。这个解决方案非常简单。你所要做的就是将显示：内联规则你的浮动元素。所以你只会从这样的事情：

#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-overcoming盒模型hack–如果你想指定任何div的宽度，不指定填充或利润。只需创建一个没有宽度设置的内部div，然后指定它的填充和边距。所以不要这样做：

#main-div{
width: 150px;
border: 5px;
padding: 20px;
}

Do something like this:

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}

3-min-height忽略该属性在IE–“最小高度”属性适用于Firefox但是IE忽略它。IE的高度作为FF的最小高度。注：在IE 7的问题是固定的。

/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* for Internet Explorer */
/**/
* html .container {
height: 8em;
}
/**/

4.的IE浏览器，最小宽度固定为最小宽度在Internet Explorer中的缺失。

对块元素居中

5-centering块元素–有定心块元素多技术；并对技术的选择取决于你是否在绝对值的大小设置的百分比或。
对整个页面的内容：

body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}

6-vertical配合CSS–如果你想知道如何可以实现垂直对齐功能的正确方式，简单地指定你的文字高度相同的行高，容器的。

#wrapper {
    width:530px;
    height:25px;
    background:url(container.gif) no-repeat left top;
    padding:0px 10px;
}
#wrapper p {
    line-height:25px;
}

7个主要原因是CSS栏被弄乱了-关于如何用有用的图表和代码片段修复常见的CSS列问题的简单易懂的文章。
CSS技巧

8 -当你试图创建一个两列浮动布局时，扩展框错误，IE将创建一个“浮动下拉”，它是由于在固定宽度的浮点div中有过多的内容，必须与布局中的某个特定位置相匹配。几种可能的解决方法是在本文中详细。

9了解CSS定位1部分–有趣的系列文章，不只是盖定位，而且属性定义布局如显示和浮动，和预览新的CSS3模块布局。第一部分将介绍定位和显示属性。一，二，三给你的可能性，你的定位有深刻的理解。

10绝对和相对定位的区别是什么？-是否使用相对或绝对定位对刚开始使用CSS的人来说是非常令人沮丧的。对这个问题的回答将对这种混乱增加一点透明度。

#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}

11 hangtab–创建从浏览器窗口的边缘粘标签（甚至是核心的内容）。看看他们的软件公司Panic的网站。

#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

12 CSS浮动理论：你该知道的事情–smashingmagazine浏览相关文章数十篇，选择你应该牢记开发CSS的花车布局的最重要的事情。

<div> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>

13 floatutorial简单教程：CSS浮动–floatutorial通过浮动元素如图像、落帽的基本知识，接下来和返回按钮，图像画廊，内联表和多栏的布局。

14明确你的浮–正道–清漂可以是一个CSS发展最令人沮丧的方面，最好的方法之一是使用easyclearing网站。

/* EasyClearing http://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，然后我将标记我的盒子”
<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
  <div class="boxBottom"></div>
</div>

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}
.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}

也askthecssguy解释使用谷歌分析的技术，它通过把一个像素的缺口中的每一个角落得到圆角效果，是一种新的方式使用静态图像创建圆角。你可以在这里看到一个例子。

CSS技巧

编码实现圆角–Alen Grakalic编码方法固定宽度的圆角16-3步骤简单，简单的3个步骤。他还在这里创建了一个演示。

CSS样式的问题

17与我们的浮动标签，一些技巧创造伟大的Web窗体–Cris Coyer股票技巧：重点伪类，使用提示和更多。他还创造了很好的和简单的联系方式，这是他第一次公布了这里。

label {
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 100px;
}

18 -干净和纯粹的CSS表单设计——对于CSS爱好者来说，本教程演示了如何在不使用HTML表的情况下设计纯CSS表单的建议。你可以在这里抓取代码。

CSS技巧

19 autopopulating文本输入字段与JavaScript–有时我们需要向用户解释他们应该进入文本输入字段。一个常见的解决方案时，没有标签可以显示是放一些占位符文本在文本字段，让作为标签。本教程介绍了一个很好的解决方案，通过启用JavaScript，标签元素被隐藏，输入元素title属性的值被复制到值属性。如果禁用JavaScript，则标签将显示在文本输入之上，该文本输入是空的。一个简单的演示，在那里你可以看到这个动作是在这里。

20 -跨浏览器的横向规则与背景图像-你想创建一个跨浏览器的横向规则，利用自定义图像作为内容分隔符。

div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}

Your tag should look like this:

<div class="hr"><hr /></div>