gpt4 book ai didi

javascript - 选择框在 Firefox 中被压扁和拉长

转载 作者:太空宇宙 更新时间:2023-11-04 12:34:19 25 4
gpt4 key购买 nike

这是 jsfiddle对于其余代码,但我在下面附上了我的样式 CSS

在 Chrome 中它们看起来像这样 Chrome

在 Internet Explorer 中它们看起来像这样 Internet Explorer

在 Firefox 中它们看起来像这样 enter image description here

不确定问题是什么以及如何解决

这是我的样式 CSS

html {
height: 100%;
}
* {
margin: 0;
padding: 5;
}
body {
font: normal .80em'trebuchet ms', arial, sans-serif;
background: #F5F5EE;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #362C20;
letter-spacing: 0em;
padding: 0 0 5px 0;
}
h1, h2, h3 {
font: normal 170%'century gothic', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
color: #009FBC;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
color: #009FBC;
padding: 0 0 5px 0;
font: normal 110% arial;
text-transform: uppercase;
}
h5, h6 {
color: #888;
font: normal 95% arial;
letter-spacing: normal;
padding: 0 0 15px 0;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #AEB002;
}
a:hover {
text-decoration: none;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#header {
background: #323534 url(back.png) repeat-x;
height: 177px;
}
#logo {
width: 880px;
position: relative;
height: 140px;
background: transparent;
}
#logo #logo_text {
position: absolute;
top: 10px;
left: 0;
}
#logo h1, #logo h2 {
font: normal 300%'century gothic', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0 0 0 9px;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding: 22px 0 0 0;
color: #FFF;
letter-spacing: 0.1em;
text-decoration: none;
}
#logo_text h1 a .logo_colour {
color: #E4EC04;
}
#logo_text a:hover .logo_colour {
color: #FFF;
}
#logo_text h2 {
font-size: 120%;
padding: 4px 0 0 0;
color: #999;
}
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100%'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a, ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
#site_content {
width: 880px;
overflow: hidden;
margin: 20px auto 0 auto;
padding: 0 0 10px 0;
}
#sidebar_container {
float: right;
width: 224px;
}
.sidebar_top {
width: 222px;
height: 14px;
background: transparent url(side_top.png) no-repeat;
}
.sidebar_base {
width: 222px;
height: 14px;
background: url(side_base.png) no-repeat;
}
.sidebar {
float: right;
width: 222px;
padding: 0;
margin: 0 0 16px 0;
}
.sidebar_item {
background: url(side_back.png) repeat-y;
padding: 0 15px;
width: 192px;
}
.sidebar li a.selected {
color: #444;
}
.sidebar ul {
margin: 0;
}
#content {
text-align: left;
width: 620px;
padding: 0 0 0 5px;
float: left;
}
#content ul {
margin: 2px 0 22px 0px;
}
#content ul li, .sidebar ul li {
list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 25px;
line-height: 1.5em;
}
#footer {
width: 100%;
font-family:'trebuchet ms', sans-serif;
font-size: 100%;
height: 80px;
padding: 28px 0 5px 0;
text-align: center;
background: #3B3939 url(footer.png) repeat-x;
color: #A8AA94;
}
#footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
}
#footer a {
color: #A8AA94;
text-decoration: none;
}
#footer a:hover {
color: #FFF;
text-decoration: none;
}
.search {
color: #5D5D5D;
border: 1px solid #BBB;
width: 134px;
padding: 4px;
font: 100% arial, sans-serif;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input {
padding: 5px;
width: 225px;
font: 100% arial;
border: 1px solid #E5E5DB;
background: #FFF;
color: #47433F;
}
.form_settings .submit:hover {
background: #00CAEE;
color: #E4EC04;
}
.form_settings .submit {
font: 100% arial;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #3B3B3B;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.important-btn:hover {
background: #8C1717;
}
.important-btn {
font: 100% arial;
border: 0;
width: 200px;
margin: 5px 0px 5px 215px;
height: 25px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.regularbutton:hover {
background: #00CAEE;
color: #E4EC04;
}
.regularbutton {
font: 100% arial;
border: 0;
width: 200px;
margin: 0px 0px 0px 212px;
height: 25px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.whattoput:hover {
background: #00CAEE;
color: #E4EC04;
}
.whattoput {
font: 100% arial;
border: 0;
width: 100px;
margin: 0px 0px 0px 5px;
height: 25px;
padding: 0px 0 0px 0px;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.form_settings option {
font: 100% arial;
border: 0;
width: 10px;
margin: 5px 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
}
.form_settings select {
font: 100% arial;
margin: 0px 0px 0px 5px;
width: 140px;
}
.form_settings textarea {
font: 100% arial;
width: 225px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #3B3B3B;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #E5E5DB;
color: #47433F;
border-top: 1px solid #FFF;
}
.hideother {
display: none;
}
#banner {
width: 100%;
background: orange;
height: 25px;
position: fixed;
top: 0;
display: none;
left: 0;
text-align: center;
line-height: 25px;
font-weight: bold;
color:#4F0002;
}

最佳答案

.form_settings option {
...
width: 10px;
...
}

是你的罪魁祸首。

Chrome 和 IE 不支持大多数 option 样式(dag blast them),所以它按照浏览器的意图呈现,但是 Firefox(看起来)让你把它搞砸了想。你肯定把 width: 10px; 搞砸了。我只是建议丢失所有的 option 样式,但这只是我的意见。

关于javascript - 选择框在 Firefox 中被压扁和拉长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27397295/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com