Question

我有一个标签页，其中所选标签后面有一个箭头。在铬和ie这工作正常。但在Firefox中，元素不会出现。有什么理由为什么firefox不会渲染这个CSS？我如何解决Firefox的问题？

li.current::after {      
    color: transparent;
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    margin: auto;
    border-width: 15px 15px 0px;
    /* background-position-y: -100px; */
    border-style: solid;
    /* border-color: #30B3EE transparent; */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAAAyCAMAAAB/N5X1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUM4MEIzNDY4MkVEMTFFNEFEQkQ5MEQ0NjQxNkEzMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUM4MEIzNDc4MkVEMTFFNEFEQkQ5MEQ0NjQxNkEzMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQzgwQjM0NDgyRUQxMUU0QURCRDkwRDQ2NDE2QTMwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQzgwQjM0NTgyRUQxMUU0QURCRDkwRDQ2NDE2QTMwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu5Tt0gAAAMAUExURbPj92TF7mPE7WHE7WDD7F7C7F3B61vA61m/6li+6la+6VW96VO86FK76FC66E65502450u45kq35ki25Ua15UW05EOz5EKz40Cy4z+x4j2w4juv4Tqu4Tit4f///zet4DWs4DSr3zKq3zCp3i+o3i2o3Syn3Sqm3Cml3Cek2yWj2ySi2yKi2v3+/yGh2h+g2fX7/h6f2eb1+/r9/hye2Of2/OX1/P7//+b2/OX0++X1++f1/OT0++b1/GnA5vT7/hqd2MTm9Vm+6G3C51e65lm+6mO95GzC5/b7/mW/5+T1/FvA6kqy4GfA5mW+5W/D6Oj2/HHD6OP0+2vB5m7C6HPE6We/5trv+fz+/+T1+3HE6GK85GS95f///15eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///5vxyWQAAABedFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wCxyC4mAAABIklEQVR42rzN1y6EURRA4V8fndFbdEYJkbiWiRrRIoYLrPd/DZ0pf9n7nL199ysrSf4Bbd5IoN0XHw86PPH1oNMPPw+6vPD3oNsH9Q96PND4oGSP5ge9xs5ofdBn6oq0B/2WSH8wYIesB4NWyH4wZIO8B8MGjsl/MBKPogejsSh+UI6D5MFYDGQPxsMhfTARCvmDyTBoHkyFQPdgWg/tgxkt9A9mdQh5MKdwStiDeTlCHyxIEf5gUYaYB0sSxD1YLnRJ7IOVAo/EP1jN9YzFg7Uc99g8WM90h9WDjQw17B5spjrB8kElxQW2D7ZaPGD9YLvJEfYPdhrIF5oHu3Vu8Hmw9+sJrwf7327xe3Dw6RXPB4fvzvF9UK2+4P3gWl28CTAATPcdeSiNIiIAAAAASUVORK5CYII=')!important;
    background-position-x: -49px;
    width: 0;
}

我的jsfiddle：

http://jsfiddle.net/okwhyrpc/10/

Answer 1

问题是由于Firefox上的background-position-x属性not implemented（还是？）：此浏览器目前不支持更改单个背景轴的可能性。< / p>

改为使用background-position: -49px 0（Fiddle）

css：没有出现在firefox中

1 个答案: