Question

任何人都可以帮助我。我是css造型的新手。我有一个css文件，其中所有的样式都存在于我正在尝试构建的asp.net网站。但是它在安装了IE 7的服务器上工作正常，当我尝试使用chrome，firefox或IE 8及以上版本查看它时，它会扭曲网站的外观。

我需要根据客户端浏览器更改边距。我该如何实现这一目标？我听说有一个“if”条件解决方案。意味着我必须在我的项目中编写单独的css文件，并根据浏览器包含正确的文件？我只是更改基本的CSS来检测浏览器并选择合适的样式吗？

我想根据客户端浏览器为分部选择不同的定位。顺便说一句，我正在研究asp.net 2.0。

现有代码：

#page   
{  
background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');  
}

我正在尝试这样做：

html>/**/body #page   
{  
background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');  
}

但是img1没有为IE 8和firefox加载。它适用于IE 7。

我尝试使用我的html文件中的以下代码将IE 7作为我的测试目标：

<!--[if IE 7]＆GT;         身体{
                background-color：红色;
             } <![endif]--＆GT;

然而，当我在IE 7上测试页面时，它只显示“背景颜色：红色”;文本。这是为什么？我在这条有条件的陈述中遗漏了什么吗？它只是采用文本而不采用背景颜色。感谢。

Answer 1

您可以为符合标准的浏览器（Chrome，Safari，Firefox等）编写代码，然后为Internet Explorer添加conditional comments。

修改

作为一个侧面，请看Eric Myers' CSS reset。这是一个很好的资源。

Answer 2

IE的条件格式：http://www.quirksmode.org/css/condcom.html

就Hacks而言，你可以通过在IE 6/7的CSS属性前面使用_来为某些浏览器（例如IE）编写无效标记，但它会使你的CSS按规范无效 - 它仍然可以正常运行。 / p>

Answer 3

请查看CSS Browser Selector插件，而不是条件评论和非标准的简单CSS黑客攻击。这个jQuery允许你为CSS文件本身内的每个浏览器编写不同的规则，没有标准的不准确性，也没有条件注释。它甚至可以让您在不同的操作系统上定位不同的浏览器。

对于IE，你会写：

.ie .myDiv
{
   background-color: #f00;
}

对于webkit浏览器：

.webkit .myDiv
{
   background-color: #bar;
}

然后IE（所有版本）和Webkit浏览器将显示不同的背景颜色。您也可以选择多种浏览器：）

Answer 4

我将在下面提到我在Oodles Technologies工作时学到的浏览器的一些CSS黑客攻击。

我要在这里列出它们，因为有些属性会在基于webkit的浏览器中产生问题，比如safari，chrome和IE。我们假设我们可以使用这个css代码：

针对Chrome和Safari的CSS：

<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> @media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari and Chrome, if Chrome rule needed */
    .selector { property:value; }

    /* Safari 5+ ONLY */
    ::i-block-chrome, .selector { property:value; }
}
 </span></span>

CSS目标Safari 9，但仅限于iOS

<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> /* Safari 9+ (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-accelerator:true)) {
     .selector { property:value; }  
}
 </span></span>

CSS仅限目标Firefox

<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> @-moz-document url-prefix() {
    .selector { property:value; }
}
 </span></span>

仅限CSS目标IE10

<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
    .selector { property:value; }
}
 </span></span>

仅限CSS目标IE9

<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> <!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
 </span></span>

仅限CSS目标IE8

<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> <!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" media="screen" />
<![endif]-->
 </span></span>

仅限CSS目标IE7

<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> <!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen" />
<![endif]-->
 </span></span>

希望你找到这些有用的

Answer 5

CSS黑客的受欢迎程度正在下降。您应该使用CSS重置启动您的CSS。您可以阅读有关重置选项in this thread的更多信息。

针对不同浏览器的CSS黑客攻击

5 个答案: