CSS將無法在Firefox中工作

-7

我實際上不知道我應該怎麼做來修復這個CSS。我的朋友也有頭痛來解決這個CSS，我需要你們幫助你看看這個CSS有什麼問題，它是在Chrome中工作，但不能在Firefox中工作。CSS將無法在Firefox中工作

注：大多數CSS在那裏我只是從Internet複製粘貼，因爲我新手到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（火狐中僅顯示「登錄」號）顯示

<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發生什麼事..

這就是發生在鉻..

來源

2013-05-30 Mohd Shahril

究竟是什麼「不工作」的意思？請提供小提琴並解釋發生問題的位置 – fcalderan

以及上述問題「什麼」不起作用？ – DiederikEEn

請提供簡要描述什麼和哪裏完全不工作.. – Gate

變化

.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; 
}

來源

2013-05-30 12:30:16

謝謝！你的回答在firefox和chrome中可以正常工作:) –

@Warai：我感到震驚 - 在給出所提供的CSS和HTML數量的情況下，你是如何從簡短的描述中找到這個解決方案的？ – ClarkeyBoy

CSS將無法在Firefox中工作

回答

相關問題