为什么我的CSS规则不适用于Firefox Quantum?是否有CSS规则限制?

时间:2017-11-25 08:49:25

标签: css firefox stylus firefox-quantum

最近我遇到了一个令人讨厌的新版Firefox Quantum的问题。看起来像IE 6-9 css规则限制,如下:

  • 忽略前4,095之后的任何规则。
  • 通过@import包含的任何样式表,或者在第一个31之后都会被忽略。
  • 嵌套4个或更多级别的@import语句将被忽略。

我们正在使用stylus @extends来扩展类。其中一些类/ css属性有超过50个css选择器,一切都很好的chrome(所有版本),firefox(所有版本,但新的量子版本)和IE9 +。一切都完全错过了新的firefox量子(版本57)。我们在IE 8-7-6中遇到过这个问题,但我们并不关心IE。现在我们用最新的firefox量子浏览器来解决这个问题。

例如,这是我的代码的和平(用手写笔扩展的css选择器):

.absolute,
.inline-input .input-icon > i,
.check-box-green input,
.radio-button-green input,
.check-box-green input + label,
.radio-button-green input + label,
.check-box-green input + label:before,
.radio-button-green input + label:before,
.check-box-green input + label:after,
.radio-button-green input + label:after,
.submit:after,
.trumpet .submit:after,
.submit:before,
.trumpet .submit:before,
.submit-icon-left > i,
.trumpet .submit-icon-left > i,
.submit.loading .spinning,
.trumpet .submit.loading .spinning,
.form .row.required > span:first-child:after,
.sidebar .sidebar-menu,
.sidebar li a.selected:after,
.sidebar li.parent .toggle-menu,
.sidebar li.parent .toggle-menu:before,
.sidebar.admin .admin-nav a > span,
.sidebar.admin .admin-nav li .notif:before,
.sidebar > :last-child,
.modal:before,
.modal .in,
.modal .title:after,
.modal .x,
.topbar .item:after,
.topbar .right .item:after,
.topbar .left .item:after,
.topbar i .item:after,
.topbar span .item:after,
.topbar .messages .msg-count,
.item .avatar i,
.item .avatar.avatar img,
.table-data[ data-table-pagination ]:before,
.table-pagination .pl .next,
.table-pagination .pl .prev,
.check-box,
.radio,
.check-box + label:before,
.radio + label:before,
.check-box + label:after,
.radio + label:after,
.drop-down .menu-drop-inactive,
.progress-bar-wrapper .progress-bar,
.input-error:before,
.input-error:after,
.appended-error > span:before,
.x-loading:before,
.loading-box,
.loading-box .x-loading,
.loading-circles,
.loading-circles:after,
.cell-loading:before,
.message-box .message-title:before,
.logo svg,
.expandable .handler:after,
.xntitle-new:before,
.xntitle-new .new,
.alert_message:before,
.tbl-tdcolspan,
.breadcrumb > *:before,
.tip-desc::before,
.tip-title,
.tip-title::before,
.tip-title .tip-title::after,
.circle,
#lightbox .popup-btn,
#lightbox #submit-loader,
#banner_hover,
.step_camp ol.steps li img.img-arrow,
.step_camp ol.steps li img.img-tik,
.step_camp ol.steps li .img-place,
.step_camp ol.steps li div.progress,
#live_loading,
.icn,
.fademe::before,
.fademe::after,
.env-label span,
.password-eye #show-pass,
.text-information > i,
.ui-datepicker.ui-datepicker.ui-datepicker:before,
.ui-datepicker.ui-datepicker.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker.ui-datepicker.ui-datepicker .ui-datepicker-next:before,
.loading-data:after,
.noUi-connect,
.noUi-origin,
.tabination-tab li::after,
.campaign-creation .text-information > i,
.steps-header .steps .step:after,
.steps-footer .step-next > i,
.select-budget .block label,
.banners-content .upload-banner-container .drag-and-drop:before,
.banners-content .upload-banner-container .generate:before,
.banners-content .upload-banner-container .drag-and-drop .inner,
.banners-content .upload-banner-container .generate .inner,
.banners-content .upload-banner-container.dragging:before,
.banners-content .upload-banner-container.dragging:after,
.uploaded-banners .file:before,
.uploaded-banners .file-progress,
.uploaded-banners .file-view,
.uploaded-banners .file-view:before,
.review .review-list .review-row .edit-step,
.review .row-c-banner .files-selected + .show-more,
.review .row-c-video .files-selected + .show-more,
.review .review-logo .files-selected + .show-more,
.review .row-c-targeting ul > li .edit-button,
.review .row-c-price .total-price .title > i,
.iframe-content .iframe-preview .preview-box:empty:before,
.file-box.uploaded:before,
.file-box.has-error:before,
.file-box .file-icon,
.file-box .file-status,
.telegram-message-preview .inner-box,
.telegram-message-preview .inner-box .example-text:after {

  position: absolute;

}

正如您所看到的,它有118个css类选择器具有 位置:绝对 属性,所有浏览器都支持它,但新的firefox量子和IE 6-8确实如此不。这最终会导致错过页面。

  • 任何人都知道这个问题?
  • 这与IE css规则限制相同吗?
  • 我无法找到有关firefox量子问题的任何文档!如何解决这个问题?

感谢。

1 个答案:

答案 0 :(得分:2)

我已经弄明白了。问题是我用于属性选择器的空格如下:input[ type="text" ]而不是input[type="text"]。这是团队的错误习惯。所以,新的firefox量子不支持css选择器之间的这些不必要的空间。我删除了所有这些空格,我的问题得到解决。

对于那些可能习惯这种习惯的人,请不要这样做。这可能需要花费大量的时间来解决这个问题。