CSS hacks與爭議

日期：2013-12-16  來源：攀枝花惠康網絡公司

margin-right: -300px;

1、聲名本文闡述了我們發現的在用CSS設計中有用的解決方案。

要去除水平滾動條，可以在body中插入overflow-x:hidden屬性。

outline:none;

.container {

IE6以下

*html{}

*:first-child+html {} * html {}

只對IE 7

*:first-child+html {}

html>body {}

只對現代瀏覽器(非IE 7)

html>/**/body {}

最新的Opera 9以下版本

text-indent: -5000px;

Safari

html[xmlns*=”"] body:last-child {}

要使用這些選擇器，請在樣式前寫下這些代碼。例如：

#content-box {

height: 150px;

}

* html #content-box {

width: 250px;

只對IE 7 和現代瀏覽器

}

/* 重寫膳縵沔的代碼而且把寬度改為250PX

在IE6以下版本中合用。 */

3、在IE6中使用透明PNG圖片

IE6的一個很難措置的BUG就是它不撐持透明PNG圖片。

你可能需要用一個重寫的CSS的濾鏡來解決這個問題：

*html #image-style {

background-image: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.css88.com/archives/”fil

}

4、去失蹤毗連虛線框

當你點擊鏈接時，Firefox會在鏈接四周發生一個虛線外框。

這個很好解決，只需在a標簽中添加outline:none就可以了。

position: relative;

a{

}

當你想在一個瀏覽器里改變樣式而不像在其他瀏覽器中改變時，這些選擇器很有用。

5、對inline元素應用寬度。

如不美觀你對一個inline元素使用寬度，它將只在IE6下起浸染。

* html .container {

2、瀏覽器特定的選擇器

所以的HTML標簽要么是Block的要么就是inline的。inline屬性的標簽有<span><a><strong>和<em>Block標簽搜羅<div><p><h1><form>和<li>

你不能節制inilne標簽的寬帶，不外有一個體例是把標簽屬性年夜inline改為Block。

9、潛匿水平滾動

span{

position: relative;

width:150px;

display:block;

}

應用display:block能夠把span標簽釀成block標簽，年夜而節制它的寬度。

6、使也述固定寬度的網站居中。

#wrapper {

margin: auto;

}

7、圖片替代手藝

對于頭部來說，永遠是最好用文字而不是圖片。在你必需要用圖片的某個非凡處所最好使用潛匿文字的層的布景圖片。這對于屏幕閱讀和seo很是有用，盡管依然使用很通俗的文字，這可以聯想到所有的利益。

HTML：

CSS:

h1 {

background: url(heading-image.gif) no-repeat;

}

h1 span {

position:absolute;

width: 300px;

}

正如你所見，我們對H1標簽使用通俗的HTML代碼，用CSS來將圖片替代文字。Text-indent把文字放到左邊5000像素處，年夜而用戶看不到它們。

8、最小寬度

ename.png”, sizingMethod=”scale”);

IE的此吐矣閩Bug就是它不撐持min-width屬性。min-width確實很是有用，出格是對于100%寬度的可變模板來說，因為他告訴瀏覽器遏制縮短。

html:first-child {}

min-width:300px;

}

要讓這些在IE6下起浸染的話你要添加額外的全力！你需要建樹兩個DIV，一個包含著另一個。

IE 7 以下

<div class=”container”>

<div class=”holder”>Content</div>

</div>

然后你需要設置外面層的min-width：

.container {

min-width:300px;

}

此刻又要IE hack起浸染了，你需要寫下以下代碼：

<h1><span>Main heading one</span></h1>

border-right: 300px solid #FFF;

}

* html .holder {

display: inline-block;

}

當瀏覽器窗口調整外層寬度來順應直到它縮小到border的寬度時，這個時辰它就不能夠在縮小了。而holder層也會遏制縮短。外層的邊框寬度釀成了內層的最小寬度。

body {

對于除IE6以外的所有瀏覽器來說你只需min-width:xpx;例如：

overflow-x: hidden;

為了讓你的網站在瀏覽器中居中，可覺得最外層Div添加position:relative屬性，然后將margin設為auto。

}

這在你決意要用一個比瀏覽器款的圖片或Flash時很有用。

翻譯聲名：這是Solid State Group網站上的一篇很友好的文章，解決了我的良多問題。在此我翻譯其文，并對原作者暗示很是感謝感動！原文地址： http://www.solidstategroup.com/page/1592