Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

Close Tab button on left

  • 14 trả lời
  • 1 gặp vấn đề này
  • 135 lượt xem
  • Trả lời mới nhất được viết bởi Kit Marsden

more options

Obviously people have asked this before, but those threads all seem to be closed now. The idea that a browser would not want to have a consistent UI with every other part of the operating system is absolutely nuts, so why is it not easier (or even automatic?!) to place the 'close tab' button on the left when running on a Mac operating system?

I have tried the solutions recommended here – https://support.mozilla.org/en-US/questions/1253751 – but without any success. Maybe someone could help me understand what I am doing wrong? Better yet, maybe Mozilla could remove the need for such workarounds and implement what ought to be a standard feature?

Obviously people have asked this before, but those threads all seem to be closed now. The idea that a browser would not want to have a consistent UI with every other part of the operating system is absolutely nuts, so why is it not easier (or even automatic?!) to place the 'close tab' button on the left when running on a Mac operating system? I have tried the solutions recommended here – https://support.mozilla.org/en-US/questions/1253751 – but without any success. Maybe someone could help me understand what I am doing wrong? Better yet, maybe Mozilla could remove the need for such workarounds and implement what ought to be a standard feature?

Giải pháp được chọn

More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.


userChrome.css =>

.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  margin-inline: -2px 2px !important;
}

Đọc câu trả lời này trong ngữ cảnh 👍 0

Tất cả các câu trả lời (14)

more options

Giải pháp được chọn

More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.


userChrome.css =>

.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  margin-inline: -2px 2px !important;
}

Hữu ích?

more options

Amazing, thank you. The about:config bit was the missing step, and that is now working for me! Thank you for such a quick and helpful response; really pleased!

Hữu ích?

more options

Just a further quick follow-up to this... The solution above works, but the 'close tab' button does 'jump' slightly on hover (probably just a padding issue, I assume). However I found this code on GitHub, which does not have the 'jump' on mouseover. So if anyone else is struggling with this issue and finds their way here, I recommend checking this out too.

Hữu ích?

more options

That code uses slightly different values for the margin-left (-5.5px) and margin-right (3px) with the latter probably fixes this.

.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  margin-inline: -5.5px 3px !important;
}

Hữu ích?

more options

cor-el said

That code uses slightly different values for the margin-left (-5.5px) and margin-right (3px) with the latter probably fixes this.
.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  margin-inline: -5.5px 3px !important;
}

Firefox just updated itself to the latest version... Now the 'close' button appears next to the favicon on the tab, not in its place. Seems an odd change to make. Do I just need to adjust the margin/padding accordingly?!

Hữu ích?

more options

No, after a restart, the 'close' button now appears on the left, where it should... But instead of simply replacing the tab's favicon (as before), the favicon now jumps to the right when you hover over the 'close' button, pushing the text of the table title out of view...

I think that's probably just a bug in this latest release, as every time I open Firefox the window is slightly the wrong size for my screen now too (which also never used to happen before this version), so hopefully a new update will be available soon which fixes these minor irritations.

Hữu ích?

more options

You may have to increase the margin-inline (margin-left and margin-right) property values if the size of the close button increases on hover too much that the favicon is pushed to the right.

Hữu ích?

more options

Thank you, I'll try that. For the record, this is what's happening now on a tab (this tab, in fact); normal, and then on mouseover:

Hữu ích?

more options

cor-el said

You may have to increase the margin-inline (margin-left and margin-right) property values if the size of the close button increases on hover too much that the favicon is pushed to the right.

Yes, turns out I can adjust the margins without any issue. But the margins are not causing the problem! In the past, the 'close' button would take the place of the favicon. Now the favicon hops over and they appear side-by-side (see screenshots above).

Looks like the problem is in this piece of code:

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-image, .tabbrowser-tab:not([pinned="true"]):hover .tab-throbber {

 display: none !important;

}

Clearly the favicon (.tab-icon-image) is supposed to be hidden (display: none;) on hover. But that is no longer the case, since the most recent update to Firefox.

Được chỉnh sửa bởi Kit Marsden vào

Hữu ích?

more options

EDIT: The code below has been superseded by an improved version, posted by me below. Please use that instead.

For anybody still looking for a fix for this (there are dozens of us!!), this updated userChrome.css fixes it, retaining the support for muting tabs playing audio.

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button {
  display:none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  -moz-box-ordinal-group: 0 !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  display: none;
}

Được chỉnh sửa bởi bjarke.bech vào

Hữu ích?

more options

bjarke.bech said

For anybody still looking for a fix for this (there are dozens of us!!), this updated userChrome.css fixes it, retaining the support for muting tabs playing audio. .tabbrowser-tab .tab-close-button { opacity: 0; margin-left: -4.5px !important; margin-right: 2px !important; } .tabbrowser-tab:not(:hover) .tab-close-button { display:none; } .tabbrowser-tab:not([pinned="true"]):hover .tab-close-button { opacity: 1; margin-inline-end: 0; -moz-box-ordinal-group: 0 !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack { -moz-box-ordinal-group: 99999 !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) { display: none; }

This is great! However, that only works in the active tab. Now if I mouseover a tab I'm not currently on, the favicon goes – but I don't get a close button at all! In the currently active tab, that all works perfectly...

Hữu ích?

more options

Kit Marsden said

This is great! However, that only works in the active tab. Now if I mouseover a tab I'm not currently on, the favicon goes – but I don't get a close button at all! In the currently active tab, that all works perfectly...

Weird - works fine here. Are you on Firefox 99.0?

If you're comfortable with HTML+CSS and developer tools, you may be able to fix it yourself by opening the tab bar in a web inspector like this:

  1. Press ⌥⌘I on any tab to open the regular Web Inspector
  2. Click the ··· button in the top right corner
  3. Click Settings (cog icon)
  4. Check "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging"
  5. Close the web inspector
  6. In the Firefox menu bar, Go to Tools -> Browser Tools -> Browser Toolbox
  7. The browser chrome web inspector opens, and you can change the CSS for the tabbar on the fly.

If you do solve this, please post your findings as I am a bit curious as to why it won't work on your system.

EDIT: Found the bug, it happens when you have lots of tabs open - fixed in below post:

Được chỉnh sửa bởi bjarke.bech vào

Hữu ích?

more options

Apologies - had the same issue happen to me today with 10+ tabs open - it won't happen if you only have a handful of tabs open.

This code fixes it:

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button {
  display:none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  -moz-box-ordinal-group: 0 !important;
  display:unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  display: none;
}

Được chỉnh sửa bởi bjarke.bech vào

Hữu ích?

more options

bjarke.bech said

Apologies - had the same issue happen to me today with 10+ tabs open - it won't happen if you only have a handful of tabs open. This code fixes it: .tabbrowser-tab .tab-close-button { opacity: 0; margin-left: -4.5px !important; margin-right: 2px !important; } .tabbrowser-tab:not(:hover) .tab-close-button { display:none; } .tabbrowser-tab:not([pinned="true"]):hover .tab-close-button { opacity: 1; margin-inline-end: 0; -moz-box-ordinal-group: 0 !important; display:unset !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack { -moz-box-ordinal-group: 99999 !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) { display: none; }

Amazing! That is perfect, thank you so much!

As you say, there are so many people looking for this! Like I've mentioned before, I can't believe this is not a standard option in the browser settings... A simple tickbox for 'Close button on left' or 'Close button on right'. (Or even, like the colour/theming, an option for 'Follow system theme' – ie. left for Mac users, right for Windows – or 'Let me choose'.)

Hữu ích?

Đặt một câu hỏi

Bạn phải đăng nhập vào tài khoản của bạn để trả lời bài viết. Vui lòng bắt đầu một câu hỏi mới, nếu bạn chưa có tài khoản.