使用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>
