Question

我正在Asp.Net创建一个网站。

当我在Internet Explorer中运行它时工作正常但是当我在Firefox中运行时它很乱。

控件的对齐方式已更改，并且.css的效果在firefox中丢失。

有没有解决方案让我的网站与Firefox兼容？

.form-group .help-block:not(.error) {
  display: block !important;
 }
.form-control {
  height: 28px; 
  font-size: 13px; 
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
 }
 .col-md-10
 {
   width: 50%;
 }
 .navbar .nav > li > a {
  color: #575757;
  font-size: 13px;
  padding-top: 15px;
  padding-bottom: 14px;
  padding-left: 15px;
  padding-right: 15px;
 }
 .navbar .nav > li > a:hover,
 .navbar .nav > li > a:focus {
 color: #000;
 background: #529e9b;
 background: rgba(255, 255, 255, 0.05);
 }

Firefox版本26.0 Internet Explorer 8

主要问题是错过了firefox中所有控件的对齐方式。

Answer 1

我认为你需要做一些事情：

有一个小脚本，可以检查哪个浏览器＆amp;它是你正在运行的版本。
为不同的浏览器写入不同的.css类。
检查浏览器＆amp;它的版本然后应用适当的.css类例如。

if (strBrowserVersion == "Microsoft Internet Explorer6" || strBrowserVersion == "Microsoft Internet Explorer7")
{
   $('#OrderHeaderAll colgroup').find('col:eq(' + 5 + ')').css({ 'width': '60px' });
}
else
{
   $('#OrderHeaderAll colgroup').find('col:eq(' + 5 + ')').css({ 'width': '0px' });
}

Answer 2

在你的css中有一个类“.col-md-10”，我假设你正在使用Bootstrap。为什么要为10列定义宽度：50％的属性，而只需使用“col-md-6”来实现50％的宽度而不是覆盖bootstrap属性？

对于你的问题：不同的浏览器以不同的方式呈现html和css。在您的情况下，Firefox将呈现一些与IE8不同的css属性。您必须为不同的浏览器编写不同的CSS。您不必重写每个css文件中的所有规则，只需要重写样式的属性。

您可以在所有浏览器中使用主css文件，在页面/视图的head部分中，您可以为IE定义css。以下css将针对IE的所有版本

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

在href中有css文件的名称，它只定义了IE的特定规则。

如果以不同的方式在IE中呈现css规则

.navbar .nav > li
 {
    width:20px;
 }

你只需要在IE的css中定义这个规则来修复问题，IE就会自动采取为IE指定的css中定义的规则，在我们的例子中它是 “全IE-only.css”。

如果你想反过来（就像在你的情况下你的代码在IE中工作正常但在Firefox中没有工作）所以你可以使用IE的主要css文件并为IE以外的浏览器定义css，你可以在head部分使用以下代码：

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

您可以通过以下方式为不同版本的ie定义css：仅适用于IE8：

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

仅适用于IE7：

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

我希望这会有所帮助。

这是一篇关于在IE中使用不同css的好文章 http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Asp.Net网站在Internet Explorer中正常运行但在Firefox中运行不正常

2 个答案: