我正在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中所有控件的未对齐。

最佳答案

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

对于您的问题:
不同的浏览器以不同的方式呈现html和css。在您的情况下,Firefox将呈现与IE8不同的某些CSS属性。您必须为不同的浏览器编写不同的CSS。您不必重写每个css文件中的所有规则,而只需重写会使样式混乱的属性。

您可以将主要的CSS文件用于所有浏览器,并且在页面/视图的头部可以为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,并为IE以外的浏览器定义CSS,则可以使用头部中的以下代码:

<!--[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 - Asp.Net网站在Internet Explorer中可以正常运行,但在Firefox中不能正常运行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21479620/

10-11 05:47
查看更多