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