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

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 互联网浏览器 8

主要问题是firefox中所有控件的对齐错误。

Answer 1

在您的 css 中有一个类“.col-md-10”，我假设您正在使用 Bootstrap。为什么要定义宽度属性：10 列的 50% 而您可以简单地使用“col-md-6”来实现 50% 的宽度而不是覆盖引导属性？

对于您的问题： 不同的浏览器以不同的方式呈现 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 的特定规则。

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

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

您只需在 IE 的 css 中定义此规则即可解决问题，IE 将自动采用为 IE 指定的 css 中定义的规则，在我们的例子中是 “all-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/

Answer 2

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

1. 有一个小脚本，可以检查您正在运行的浏览器及其版本。
2. 为不同的浏览器写入不同的 .css 类。
3. 检查浏览器及其版本，然后应用适当的 .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' });
}