CSS在Firefox中不起作用[关闭]

Posted 2023-03-05

【中文标题】CSS在Firefox中不起作用[关闭]

【英文标题】：CSS won't work in firefox [closed]

【发布时间】：2013-05-26 00:22:07

【问题描述】：

我实际上不知道应该如何修复这个 CSS。 我的朋友也很头疼要修复这个 CSS，我需要你们帮助看看这个 CSS 有什么问题，它在 chrome 中可以工作，但在 Firefox 中不能工作。

注意：那里的大部分 CSS 我只是从互联网上复制粘贴，因为我是新手到 CSS。

@import url(http://fonts.googleapis.com/css?family=Fredoka+One);

@import url(http://fonts.googleapis.com/css?family=Alike);

body 
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    padding: 0px;
    margin: 0px;
    color: #555;


h1 
    color: black;
    font-size: 40px;
    font-weight: 400;
    font-family: 'Quicksand', sans-serif;


h4, h2 
    font-family: Consolas, monaco, monospace;


.cbutton 
    display: inline-block;
    cursor:pointer;
    color: #FFF;
    background-color: #D75C51;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    border: 1px solid;
    border-color: #b24c45;
    -webkit-box-shadow: 0 1px 0 rgba(23, 36, 45, 0.9);
    -moz-box-shadow: 0 1px 0 rgba(23,36,45,0.9);
    -ms-box-shadow: 0 1px 0 rgba(23, 36, 45, 0.9);
    -o-box-shadow: 0 1px 0 rgba(23,36,45,0.9);
    box-shadow: 0 3px 0 rgba(178, 76, 69, 0.9);
    width: 80px;
    padding: 10px;


.cbutton:hover 
    background-color: #D45045;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;  


.text_input 
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    border-spacing: 2px;
    color: #555;
    background-color: #fff;
    padding: 10px 0 8px 8px;
    margin-right: 5px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    -webkit-transition: border linear .2s,box-shadow linear .2s;
    -moz-transition: border linear .2s,box-shadow linear .2s;
    -ms-transition: border linear .2s,box-shadow linear .2s;
    -o-transition: border linear .2s,box-shadow linear .2s;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;


.text_input:hover 
    border-color: rgba(82,168,236,0.8);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    -o-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);


.text_input:focus 
    border-color: rgba(82,168,236,0.8);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    -o-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);


.atas_sekali 
    background: #E2E1E1 url(images/upper_panel_background.png) top left repeat-x;
    color: #000;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    border-bottom: 1px solid #bebebe;
    padding: 7px;
    margin-bottom: 15px;
    position:fixed; 
    top:0px; 
    right:0px;
    width: 100%;
    height: 20px;
    z-index:1001;


.content 
  z-index:1;
  padding:100px;
  border:1px solid #ccc;
  background:#eee;
  position:relative;



.clear 
    clear:both;


@-webkit-keyframes pulse 
    0%  width: .7em; height: .7em; margin: .4em;  
    50%  width: 1.1em; height: 1.1em; margin: .2em; 
    100%  width: .9em; height: .9em; margin: .3em; 


@-moz-keyframes pulse 
    0%  width: .7em; height: .7em; margin: .4em;  
    50%  width: 1.1em; height: 1.1em; margin: .2em; 
    100%  width: .9em; height: .9em; margin: .3em; 


@-ms-keyframes pulse 
    0%  width: .7em; height: .7em; margin: .4em;  
    50%  width: 1.1em; height: 1.1em; margin: .2em; 
    100%  width: .9em; height: .9em; margin: .3em; 


@-o-keyframes pulse 
    0%  width: .7em; height: .7em; margin: .4em;  
    50%  width: 1.1em; height: 1.1em; margin: .2em; 
    100%  width: .9em; height: .9em; margin: .3em; 


@keyframes pulse 
    0%  width: .7em; height: .7em; margin: .4em;  
    50%  width: 1.1em; height: 1.1em; margin: .2em; 
    100%  width: .9em; height: .9em; margin: .3em; 


.radio 
    color: #798188;
    cursor: pointer;
    margin-left: .5em;
    display: inline-block;


.radio,
.radio span:before 
    -webkit-transition: .25s ease;
    -moz-transition: .25s ease;
    -ms-transition: .25s ease;
    -o-transition: .25s ease;
    transition: .25s ease;


.radio span 
    width: 1.5em;
    height: 1.5em;
    margin-right: .5em;
    border-radius: 3em;
    background: #202325;
    vertical-align: top;
    display: inline-block;


.radio span:before 
    content: '';
    width: .7em;
    height: .7em;
    margin: .4em;
    border-radius: 3em;
    display: inline-block;
    background-color: rgba(0,0,0,0);


.radio:hover span:before 
    background-color: rgba(255,255,255, .9);



input[type="radio"]:checked + .radio span:before 
    background-color: #9fd86b;
    width: .9em;
    height: .9em;
    margin: .3em;
    -webkit-animation: pulse .25s;
    -moz-animation:    pulse .25s;
    -o-animation:      pulse .25s;
    animation:         pulse .25s;


a:link 
    color: #4a4a4a;
    text-decoration: none;


a:visited 
    color: #4a4a4a;
    text-decoration: none;


a:hover, a:active 
    color: #4a4a4a;
    text-decoration: underline;


.container 
    border:2px solid;
    background-color: #F9F9F9;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    color: #333;

.container td, .container th 
    border-top-color: white;
    border-bottom: 1px solid #DFDFDF;
    color: #555;

.container th 
    text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
    font-family: "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
    font-weight: normal;
    text-align: left;
    line-height: 1.3em;
    font-size: 14px;

.container td 
    color: #333;
    font-size: 14px;
    font-weight: normal;
    display: table-column;
    min-height: 19px;
    border-right: 1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;


.index td 
    width: 200px;
    text-align: center;


.index h2 
    text-align: center;


.home 
    background-image: url('images/home.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    border: none;
    padding-left: 16px;
    vertical-align: middle;
    cursor:pointer;
    width:24px;
    height:24px;
    float:left

该表格不会在 Firefox 中显示（在 Firefox 中仅显示“登录”）

<div class='login_main'>
<table class='container'>
<tr>
    <th colspan='2' style='text-align:center;'> Login </th>
</tr>
<tr>
    <td>Username : </td><td><input class='text_input' type='text' name='login_username' size=20></td></tr>
<tr>
    <td>Password : </td><td><input class='text_input' type='password' name='login_password' autocomplete='off' size=20></td></tr>
<tr>
    <td align=center colspan=6><button class='cbutton' id='login_button'>Login</button></td></tr>
</table>

这就是在 Firefox 中发生的事情..

这就是 chrome 中发生的事情..

【问题讨论】：

“不起作用”到底是什么意思？请提供一个小提琴并解释问题发生在哪里

和上面的问题“什么”不起作用？

请提供简要说明什么和哪里不工作..

对不起，我已经编辑了我的问题..

尝试删除您在代码中定义的所有colspan（最好不要使用table 进行布局）或提供演示页面

【参考方案1】：

改变

 .container td 
    color: #333;
    font-size: 14px;
    font-weight: normal;
    display: table-column;
    min-height: 19px;
    border-right: 1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;

到

 .container td 
    color: #333;
    font-size: 14px;
    font-weight: normal;
    min-height: 19px;
    border-right: 1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;

【讨论】：

谢谢！您的答案在 Firefox 和 chrome 中正常工作:)

@Warai：我很震惊——考虑到提供的 CSS 和 html 的数量，你是如何从简短的描述中得出这个解决方案的？