CSS 脚本兼容性

Question

我需要使我的 CSS 脚本与 Mozilla 和 Google Chrome 兼容，而且我还需要它在笔记本电脑和台式电脑上全屏显示。现在，place.Saw 有一些技巧，但我不知道如何实施。希望有人能指导我。

CSS脚本

<style>

#logo{
background-image:url(logo.png);
width:180px;
height:150px;
}

#header{
background-color: rgb(37, 37, 48);
box-sizing: border-box;
color: rgb(49, 49, 49);
display: block;
float: left;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height:auto;
line-height: 25.3968px;
min-height: 1px;
font-weight:100;
width:110%;
position:fixed;
margin-left:-1%;
margin-top:-1%;
z-index:10000;
}

button{
font-size: 12px;
line-height: 1;
display: inline-block;
text-transform: uppercase;
font-weight: bolder;
padding: 16px 18px;
background-color: #90ef7f;
color: #313131;
border: 0;
border-radius: 2px;
margin: 1px;
text-align: center;
}

button:hover{
background-color: #90ef7f;
color: #eeeaea;
}

#header h1,.demo h3{text-transform:none}
#header{border-bottom:2px inset #f6f6f6}
#header h1{text-align:left;color:#fff;margin:0 0 0 0}
h1{margin-bottom:1em}
a.btn.btn-theme{width:13%;color:#eeeaea;padding:5px;background-  color:#34343e;border:1px solid #34343e;border-bottom:0;border-radius:0;font-weight:400;margin:0 10px 0 0}
a.btn.btn-theme:hover{color:#90ef7f}
a.btn.btn-theme.disabled{background-color:#f6f6f6;color:#313131;opacity:1}
.btn-group.theme{width:100%; font-size:16px;text-transform: uppercase;margin-top:-4%;}

#div {
width:220px;
height:100px;
text-transform:uppercase;
font-size:16px;
font-family:haveltica;
text-align:center;
font-weight:bold;
color:lightblue;
margin-top:10px;
}


h1{
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 36px;
font-style: normal;
font-variant: normal;
font-weight: 100;
height: 35px;
line-height: 44px;
margin-bottom: 20px;
margin-right: 0px;
margin-top: 20px;
text-align: left;
text-transform: none;
width: 940px;
zoom: 1;
}

HTML 代码

<div id="header" class="hidden-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="defaultreports.php"><div id ="logo"></div></a>

<div class="container" style = "margin-top:-10%;padding:2%"><h1>REPORT MODULE</h1>

<div id = "div" href="javascrit:void(0);">Welcome <?php echo $_SESSION['DIV_USERNAME']; echo '<br>';?>
</div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="btn-group theme">
<?php 
//creating menu
foreach((array)$profile_menu as $key=>$val)
{ ?>
<a class="btn btn-theme" href="<?php echo $key ?>"><?php echo $val ?></a>
<?php } ?>

$profile_menu = array(
                    'a.php'=>'a',
                    'b.php'=>'b',
                    'c.php'=>'c',
                    'd.php'=>'d',
                    'e.php'=>'e',
                    'f.php'=>'f',
                    'logout.php'=>'Logout'
                    );


?>
</div> 
</div>
</div>
</div>
</div>

Answer 1

不完全确定您在此处尝试做什么，因为您使用的是您未包含的 CSS 名称引用。

你 CSS 在我看来还不错，但有点乱。我建议使用 DOM 资源管理器查看每个未正确显示的元素并对其 CSS 参考块进行调整。

CSS 脚本兼容性

CSS Script Compatibility

css

google-chrome

firefox

browser

compatibility