- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我在网页上有这个 CSS,当我在 chrome 中测试它时,webkit-box-flex 完全按照它的意思去做。
但是,在 firefox 上,它没有。
有人可以看看我的 CSS 并告诉我我需要更改哪些内容才能使其在两者上都能正常工作吗?
.buttonGroup
{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack:justify;
-webkit-box-flex: 1;
box-sizing: border-box;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack:justify;
box-sizing: border-box;
}
.buttonGroup > li
{
display: block;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
border: solid 1px #9a9a99;
border-left: none;
border-radius: 0px;
-webkit-border-radius: 0px;
text-align: center;
background: rgb(243,243,243); /* Old browsers */
background: -moz-linear-gradient(top, rgba(243,243,243,1) 0%, rgba(194,194,194,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,243,1)), color-stop(100%,rgba(194,194,194,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(243,243,243,1) 0%,rgba(194,194,194,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(243,243,243,1) 0%,rgba(194,194,194,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(243,243,243,1) 0%,rgba(194,194,194,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(243,243,243,1) 0%,rgba(194,194,194,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#c2c2c2',GradientType=0 ); /* IE6-9 */
color: #6b6b6b;
font-size: 16px;
padding: 10px;
}
我看过-moz-box-flex is not flexing? Works with (Chrome/Webkit)
但他的修复对我来说没有意义。
最佳答案
看来您正在使用旧的前缀和语法。 Firefox 现在原生支持无前缀的 flexbox。
当前的语法是:
.buttonGroup {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
}
.buttonGroup > li {
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
$("ul.buttonGroup").click(function (event) {
$("li", this)
.removeClass("selected")
.filter(event.target)
.addClass("selected");
});
.buttonGroup {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
}
.buttonGroup > li {
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
border: solid 1px #9a9a99;
border-left: none;
border-radius: 0px;
-webkit-border-radius: 0px;
text-align: center;
background: rgb(243, 243, 243);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(243, 243, 243, 1) 0%, rgba(194, 194, 194, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(243, 243, 243, 1)), color-stop(100%, rgba(194, 194, 194, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(243, 243, 243, 1) 0%, rgba(194, 194, 194, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(243, 243, 243, 1) 0%, rgba(194, 194, 194, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(243, 243, 243, 1) 0%, rgba(194, 194, 194, 1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(243, 243, 243, 1) 0%, rgba(194, 194, 194, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#c2c2c2', GradientType=0);
/* IE6-9 */
color: #6b6b6b;
font-size: 16px;
padding: 10px;
}
.buttonGroup > li:first-child {
border-left: solid 1px #9a9a99;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.buttonGroup > li:last-child {
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.buttonGroup > li.selected {
background: rgb(25, 58, 127);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(25, 58, 127, 1) 0%, rgba(43, 86, 178, 1) 5%, rgba(97, 150, 241, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(25, 58, 127, 1)), color-stop(5%, rgba(43, 86, 178, 1)), color-stop(100%, rgba(97, 150, 241, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(25, 58, 127, 1) 0%, rgba(43, 86, 178, 1) 5%, rgba(97, 150, 241, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(25, 58, 127, 1) 0%, rgba(43, 86, 178, 1) 5%, rgba(97, 150, 241, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(25, 58, 127, 1) 0%, rgba(43, 86, 178, 1) 5%, rgba(97, 150, 241, 1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(25, 58, 127, 1) 0%, rgba(43, 86, 178, 1) 5%, rgba(97, 150, 241, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#193a7f', endColorstr='#6196f1', GradientType=0);
/* IE6-9 */
color: #fff;
border-color: #193a7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="buttonGroup">
<li class="selected">One</li>
<li>Two</li>
<li>Three</li>
</ul>
您可能想开始使用像 Autoprefixer 这样的前缀工具或 Prefix Free .他们承担了所有艰苦的工作。
关于html - Webkit-flex 工作而 moz-flex 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32994477/
如果我需要检测 Firefox,我使用了以下代码: var firefox = !(window.mozInnerScreenX == null); 我很好奇是否有类似的东西可以在不检查用户代理字符串
我正在开发我的第一个Windows窗体应用程序以使用WebKit.Net。我需要连接到https站点并弹出身份验证表单。使用.Net内置的浏览器,身份验证表单会自动弹出,但是WebKit只是将我放到4
就像您可以将 -webkit-gradient 添加到 -webkit-box-reflect 一样,您可以对反射执行转换吗?我正在反射的图像有一个 Angular ,我想尝试旋转反射或稍微倾斜它以使
我有一个加载一些网页的 QWebView,但是当鼠标被按下并拖动时的问题是它选择了所有阻碍它的东西。 有什么办法可以摆脱这个吗??我不想选择文本和其他项目。, 如果我限制 mouseMove 和 mo
我对编程和创建程序真的很陌生。最近我在浏览 iTunes 文件夹时看到了一个 .css 文件。我打开它,看到很多 -webkit 样式来设置界面样式。 我可以使用 webkit 来设置 C++、.NE
这个问题在这里已经有了答案: How do I fix inconsistent Textarea bottom margin in Firefox and Chrome? (4 个回答) 4年前关闭
我希望自定义webkit-scrollbar为悬停状态设置不同的背景颜色动画。下面的代码在悬停时更改颜色,但不设置任何动画。它可以在div上运行,所以我怀疑webkit-scrollbar在过渡时效果
我正在尝试评估 WebKit 补丁的可能性,该补丁将允许所有渲染的图形渲染到完全透明的背景上。 想要的效果是呈现完全没有任何背景的 Web 内容,它应该看起来漂浮在桌面上(或浏览器窗口后面显示的任何内
这是 HTML 代码: A B C 这是 CSS 代码: .row { line-height:0;} .item { line-hei
我经常看到这样的 css 动画代码: @-webkit-keyframes anim{ 0{ -webkit-transform: perspective(400px) rotate3d(
我想为元素的 -webkit-transform: rotateX() 设置动画,同时允许元素保持其 -webkit-transform: rotate() 属性不变。考虑以下代码: @-webkit
CSS3 规则带来了许多有趣的特性。 取border-radius , 例如。该标准规定,如果您编写此规则: div.rounded-corners { border-radius: 5px; }
我在想: 有没有人考虑过为嵌入式 Javafx 2.0 Webkit 浏览器或新的 QT5 - Webkit 实现 webdriver-interface。 有人对朝着这个方向发展的一些 Github
我正在尝试使用 WebKit 创建 Vala 程序。这是我编译它的方式: valac --pkg gtk+-3.0 --pkg granite --pkg glib-2.0 --pkg webkitg
我刚刚开始使用 webkit,我想先自己执行构建。我对如何使用 nightly sources of webkit 进行编译有点困惑。主 webkit 站点上的构建说明说要使用整个 SVN 树来执行完
我在做一些我认为很简单的事情时遇到了问题。读取输入字段的值,然后将该值写入文本文件。我得到它的工作,但只是部分和不一致。发生的情况是,文本 a) 被截断(并非所有在该字段中输入的数据都写入文件)和 b
我在使用 -webkit-animation 时遇到内存问题。 原则 我想为渐变背景制作动画。由于它们在关键帧中不可设置动画,我将每个背景放在不同的 div 中,并且我正在使用那些 div 不透明度和
困境: 在我的 CSS 文件中,我有这个: div { -webkit-transform: scale(0.5); } 在我的 jQuery 中,我稍后会这样做: $('div).css('
我正在尝试构建网络爬虫。 我需要两件事: 将 HTML 转换为 DOM 对象。 按需执行现有的 JavaScript。我期望的结果是一个 DOM 对象,其中执行加载的 JavaScript 已经执行。
似乎在元素上应用 webkit-transform 属性,或者它的父元素具有 webkit-over-flowing-scrolling: touch 完全打破了滚动中的滚动根本不起作用。 有没有人遇
我是一名优秀的程序员,十分优秀!