为什么我的 CSS 规则不适用于 Firefox Quantum？是否有 CSS 规则限制？
Why is my CSS rule not applied in Firefox Quantum? Does is have CSS rules limits?
最近我在使用新的 Firefox Quantum 时遇到了一个非常烦人的问题。似乎 IE 6-9 css 规则限制，像这样：
- 忽略前 4,095 条之后的任何规则。
- 在前 31 个之后将忽略通过 @import 或 包含的任何样式表。
- @import 嵌套 4 层或更多层的语句将被忽略。
我们正在使用手写笔@extends 来扩展 classes。其中一些 classes/css 属性有超过 50 个 css 选择器，在 chrome（所有版本）、firefox（除新量子版本之外的所有版本）和 IE9+ 中一切正常。新的 firefox quantum（版本 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 class 选择器 position: absolute 属性，所有浏览器都支持，但新的firefox quantum和IE 6-8不支持。这最终导致错过了页面。
- 有人知道这个问题吗？
- 这是否与 IE css 规则限制相同？
- 我找不到关于firefox quantum这个问题的文档！如何解决这个问题？
谢谢。
我已经弄明白了。问题是我用于属性选择器的空格是这样的：input[ type="text" ] 而不是 input[type="text"]。那是团队的错误习惯。因此，新的 firefox quantum 不支持 css 选择器之间的这些不必要的空格。我删除了所有这些空格并解决了我的问题。
谁可能养成这个习惯，就不要那样做。这可能会花费您很多时间来解决我遇到的这个问题。
最近我在使用新的 Firefox Quantum 时遇到了一个非常烦人的问题。似乎 IE 6-9 css 规则限制，像这样：
- 忽略前 4,095 条之后的任何规则。
- 在前 31 个之后将忽略通过 @import 或 包含的任何样式表。
- @import 嵌套 4 层或更多层的语句将被忽略。
我们正在使用手写笔@extends 来扩展 classes。其中一些 classes/css 属性有超过 50 个 css 选择器，在 chrome（所有版本）、firefox（除新量子版本之外的所有版本）和 IE9+ 中一切正常。新的 firefox quantum（版本 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 class 选择器 position: absolute 属性，所有浏览器都支持，但新的firefox quantum和IE 6-8不支持。这最终导致错过了页面。
- 有人知道这个问题吗？
- 这是否与 IE css 规则限制相同？
- 我找不到关于firefox quantum这个问题的文档！如何解决这个问题？
谢谢。
我已经弄明白了。问题是我用于属性选择器的空格是这样的：input[ type="text" ] 而不是 input[type="text"]。那是团队的错误习惯。因此，新的 firefox quantum 不支持 css 选择器之间的这些不必要的空格。我删除了所有这些空格并解决了我的问题。
谁可能养成这个习惯，就不要那样做。这可能会花费您很多时间来解决我遇到的这个问题。