当前位置:首页 > 设计在线 > 网页设计 > CSS/Xhtml > DIV CSS网页设计解决方案:Hacks Issues

DIV CSS网页设计解决方案:Hacks Issues

点击次数:28 次 发布日期:2008-11-21 16:03:45 作者:源代码网
源代码网推荐

源代码网整理以下当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。

源代码网整理以下

以下为引用的内容:

源代码网整理以下IE6以下

源代码网整理以下 *html{}

源代码网整理以下IE 7 以下

源代码网整理以下*:first-child+html {} * html {}

源代码网整理以下只对IE 7

源代码网整理以下*:first-child+html {}

源代码网整理以下只对IE 7 和现代浏览器

源代码网整理以下html>body {}

源代码网整理以下只对现代浏览器(非IE 7)

源代码网整理以下html>/**/body {}

源代码网整理以下最新的Opera 9以下版本

源代码网整理以下html:first-child {}

源代码网整理以下Safari

源代码网整理以下html[xmlns*=”"] body:last-child {}

源代码网整理以下

源代码网整理以下要使用这些选择器,请在样式前写下这些代码。例如:

源代码网整理以下

以下为引用的内容:

源代码网整理以下#content-box {
  width: 300px;
  height: 150px;
}
* html #content-box {
  width: 250px;
}

源代码网整理以下/* 重写上面的代码并且把宽度改为250px
在IE6以下版本中适用。 */

源代码网整理以下3、在IE6中使用透明PNG图片

源代码网整理以下IE6的一个很难处理的BUG就是它不支持透明PNG图片。

源代码网整理以下你可能需要用一个重写的CSS的滤镜来解决这个问题:

源代码网整理以下

以下为引用的内容:

源代码网整理以下*html #image-style {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”filename.png”, sizingMethod=”scale”);
}

源代码网整理以下4、去掉连接虚线框

源代码网整理以下当你点击链接时,Firefox会在链接周围产生一个虚线外框。
  
这个很好解决,只需在a标签中添加outline:none就可以了。

源代码网整理以下a{
  outline:none;
}

源代码网整理以下5、对inline元素应用宽度

源代码网整理以下如果你对一个inline元素使用宽度,它将只在IE6下起作用。

源代码网整理以下所以的HTML标签要么是Block的要么就是inline的。inline属性的标签有<span><a>< strong>和<em>Block标签包括<div><p><h1><form> 和<li>

源代码网整理以下你不能控制inilne标签的宽带,不过有一个方法是把标签属性从inline改为Block。

源代码网整理以下

以下为引用的内容:

源代码网整理以下span{
  width:150px;
  display:block;
}

源代码网整理以下应用display:block能够把span标签变成block标签,从而控制它的宽度。

源代码网整理以下6、使一个固定宽度的网站居中

源代码网整理以下为了让你的网站在浏览器中居中,可以为最外层Div添加position:relative属性,然后将margin设为auto。

源代码网整理以下

以下为引用的内容:

源代码网整理以下#wrapper {
  margin: auto;
  position: relative;
}

源代码网整理以下7、图片替换技术

源代码网整理以下对于头部来说,永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用,尽管依然使用很普通的文字,这可以联想到所有的优点。

源代码网整理以下

以下为引用的内容:

源代码网整理以下HTML:

源代码网整理以下<h1><span>Main heading one</span></h1>

源代码网整理以下CSS:

源代码网整理以下h1 {
  background: url(heading-image.gif) no-repeat;
}
h1 span {
  position:absolute;
  text-indent: -5000px;
}

源代码网整理以下正如你所见,我们对H1标签使用普通的HTML代码,用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处,从而用户看不到它们

源代码网整理以下8、最小宽度

源代码网整理以下IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用,特别是对于100%宽度的可变模板来说,因为他告诉浏览器停止收缩。

源代码网整理以下对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如:

源代码网整理以下

以下为引用的内容:

源代码网整理以下.container {
  min-width:300px;
}

源代码网整理以下要让这些在IE6下起作用的话你要添加额外的努力!你需要创建两个DIV,一个包含着另一个。

源代码网整理以下

以下为引用的内容:

源代码网整理以下<div class=”container”>
<div class=”holder”>Content</div>
</div>

源代码网整理以下然后你需要设置外面层的min-width:

源代码网整理以下.container {
  min-width:300px;
}

源代码网整理以下现在又要IE hack起作用了,你需要写下以下代码:

源代码网整理以下

以下为引用的内容:

源代码网整理以下* html .container {
  border-right: 300px solid #FFF;
}
* html .holder {
  display: inline-block;
  position: relative;
  margin-right: -300px;
}

源代码网整理以下当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时,这个时候它就不能够在缩小了。而holder层也会停止收缩。外层的边框宽度变成了内层的最小宽度。

源代码网整理以下9、隐藏水平滚动

源代码网整理以下要去除水平滚动条,可以在body中插入overflow-x:hidden属性。

源代码网整理以下

以下为引用的内容:

源代码网整理以下body {
  overflow-x: hidden;
}

源代码网整理以下这在你决意要用一个比浏览器款的图片或Flash时很有用。

源代码网供稿.
网友评论 (0)
会员中心
设计在线
本站推荐
设计在线之精华