我正在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/