CSS无法在Firefox中运行

时间：2013-05-30 12:17:42

标签： html css google-chrome firefox

我实际上不知道应该怎么做来修复这个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中显示“login”）

<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中发生的事情。

1 个答案:

答案 0 :(得分：5)

更改

 .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;
}
相关问题
最新问题