使用20個(gè)CSS來解決常見錯(cuò)誤和修復(fù)
毫無疑問深圳網(wǎng)站制作，一個(gè)邏輯結(jié)構(gòu)的布局是最好的方式。不僅因?yàn)闉g覽器之間的布局不同，而且CSS也有很多方法來定位每個(gè)元素。今天，我們想和大家分享一些關(guān)于如何在創(chuàng)建CSS布局時(shí)避免易犯陷阱的快捷技巧。

這是本系列的第一部分，因?yàn)橛羞@么多好的技巧，如果你看到一個(gè)更容易或更好的方法，然后發(fā)表評(píng)論或電子郵件給我。我會(huì)盡我最大的努力把它包括在我們的下一篇文章中。

IE瀏覽器的bug修復(fù)

1 -錯(cuò)誤修復(fù)：IE雙邊距浮點(diǎn)錯(cuò)誤-這是一個(gè)Internet Explorer專有的錯(cuò)誤，其中一個(gè)元素是浮動(dòng)的，并給予保證金在同一個(gè)方向的浮動(dòng)-結(jié)束了兩倍的指定保證金大小。這個(gè)解決方案非常簡(jiǎn)單。你所要做的就是將顯示：內(nèi)聯(lián)規(guī)則你的浮動(dòng)元素。所以你只會(huì)從這樣的事情：

#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的寬度，不指定填充或利潤(rùn)。只需創(chuàng)建一個(gè)沒有寬度設(shè)置的內(nèi)部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中的缺失。

對(duì)塊元素居中

5-centering塊元素–有定心塊元素多技術(shù)；并對(duì)技術(shù)的選擇取決于你是否在絕對(duì)值的大小設(shè)置的百分比或。
對(duì)整個(gè)頁面的內(nèi)容：

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

6-vertical配合CSS–如果你想知道如何可以實(shí)現(xiàn)垂直對(duì)齊功能的正確方式，簡(jiǎn)單地指定你的文字高度相同的行高，容器的。

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

7個(gè)主要原因是CSS欄被弄亂了-關(guān)于如何用有用的圖表和代碼片段修復(fù)常見的CSS列問題的簡(jiǎn)單易懂的文章。
CSS技巧

8 -當(dāng)你試圖創(chuàng)建一個(gè)兩列浮動(dòng)布局時(shí)，擴(kuò)展框錯(cuò)誤，IE將創(chuàng)建一個(gè)“浮動(dòng)下拉”，它是由于在固定寬度的浮點(diǎn)div中有過多的內(nèi)容，必須與布局中的某個(gè)特定位置相匹配。幾種可能的解決方法是在本文中詳細(xì)。

9了解CSS定位1部分–有趣的系列文章，不只是蓋定位，而且屬性定義布局如顯示和浮動(dòng)，和預(yù)覽新的CSS3模塊布局。第一部分將介紹定位和顯示屬性。一，二，三給你的可能性，你的定位有深刻的理解。

10絕對(duì)和相對(duì)定位的區(qū)別是什么？-是否使用相對(duì)或絕對(duì)定位對(duì)剛開始使用CSS的人來說是非常令人沮喪的。對(duì)這個(gè)問題的回答將對(duì)這種混亂增加一點(diǎn)透明度。

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

11 hangtab–創(chuàng)建從瀏覽器窗口的邊緣粘標(biāo)簽（甚至是核心的內(nèi)容）。看看他們的軟件公司Panic的網(wǎng)站。

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

12 CSS浮動(dòng)理論：你該知道的事情–smashingmagazine瀏覽相關(guān)文章數(shù)十篇，選擇你應(yīng)該牢記開發(fā)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簡(jiǎn)單教程：CSS浮動(dòng)–floatutorial通過浮動(dòng)元素如圖像、落帽的基本知識(shí)，接下來和返回按鈕，圖像畫廊，內(nèi)聯(lián)表和多欄的布局。

14明確你的浮–正道–清漂可以是一個(gè)CSS發(fā)展最令人沮喪的方面，最好的方法之一是使用easyclearing網(wǎng)站。

/* 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 */

簡(jiǎn)單圓角的解決方案

15 -邁克問CSS家伙建議圓角-“最簡(jiǎn)單的方法是使用一個(gè)巨大的GIF，然后我將標(biāo)記我的盒子”
<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解釋使用谷歌分析的技術(shù)，它通過把一個(gè)像素的缺口中的每一個(gè)角落得到圓角效果，是一種新的方式使用靜態(tài)圖像創(chuàng)建圓角。你可以在這里看到一個(gè)例子。

CSS技巧

編碼實(shí)現(xiàn)圓角–Alen Grakalic編碼方法固定寬度的圓角16-3步驟簡(jiǎn)單，簡(jiǎn)單的3個(gè)步驟。他還在這里創(chuàng)建了一個(gè)演示。

CSS樣式的問題

17與我們的浮動(dòng)標(biāo)簽，一些技巧創(chuàng)造偉大的Web窗體–Cris Coyer股票技巧：重點(diǎn)偽類，使用提示和更多。他還創(chuàng)造了很好的和簡(jiǎn)單的聯(lián)系方式，這是他第一次公布了這里。

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

18 -干凈和純粹的CSS表單設(shè)計(jì)——對(duì)于CSS愛好者來說，本教程演示了如何在不使用HTML表的情況下設(shè)計(jì)純CSS表單的建議。你可以在這里抓取代碼。

CSS技巧

19 autopopulating文本輸入字段與JavaScript–有時(shí)我們需要向用戶解釋他們應(yīng)該進(jìn)入文本輸入字段。一個(gè)常見的解決方案時(shí)，沒有標(biāo)簽可以顯示是放一些占位符文本在文本字段，讓作為標(biāo)簽。本教程介紹了一個(gè)很好的解決方案，通過啟用JavaScript，標(biāo)簽元素被隱藏，輸入元素title屬性的值被復(fù)制到值屬性。如果禁用JavaScript，則標(biāo)簽將顯示在文本輸入之上，該文本輸入是空的。一個(gè)簡(jiǎn)單的演示，在那里你可以看到這個(gè)動(dòng)作是在這里。

20 -跨瀏覽器的橫向規(guī)則與背景圖像-你想創(chuàng)建一個(gè)跨瀏覽器的橫向規(guī)則，利用自定義圖像作為內(nèi)容分隔符。

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>