Is there a fix for the line-height bug in the Firefox button from 2011?

Dealing with the line-height bug in Firefox can be quite frustrating. It seems impossible to manually set the line-height on button elements due to a browser style declaration that cannot be reversed.

In today's world, where browser quirks are becoming less of an issue, it is annoying to have to make exceptions for specific browsers like Firefox.

I wonder if there is any solution to this problem, considering the article linked above suggested that it was nearly impossible to fix.

Feel free to experiment with this fiddle: http://jsfiddle.net/hBLQ7/

Try opening it in both Firefox and Chrome to see the difference.

Is there any way to work around this issue in modern times?

css

Answer №1

Would you like the button height adjusted to your desired specifications?

Answer №2

Have you considered using top and bottom padding to customize it?

Cascading Style Sheets (CSS)

button {
   padding: 25px 0;
}

For Instance

Explore this example on jsFiddle.

Answer №3

While experimenting with your fiddle on firefox 9, I noticed that the button appears to have the same height as the span element. Interestingly, using input types of button/submit results in the problem you mentioned: Check it out here

As of now, I haven't found a satisfactory solution to this issue.

You can find one of the related bug reports here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The sidebar's bottom gets concealed beneath the page's window

I seem to be facing an issue with the sidebar where the bottom section is not visible. Interestingly, when I remove the top navbar, everything works fine. Despite my efforts to troubleshoot and apply various solutions, none of them seem to work for me. Do ...

htmlcssgridoverflowbootstrap-5

Ensure the column breaks before the element without disrupting the wrapper in CSS

My objective is to always initiate a line break before a specific element, in this case, the h2 tag: https://i.sstatic.net/fy80H.png https://jsfiddle.net/hv0sm40o/3/ html <div class="columns"> <h2>Jelly pastry chocolate cake pastry</h2&g ...

htmlcsscss-multicolumn-layout

Tips on concealing the overflow content within a Material UI table cell, rather than allowing it to wrap around

I have been trying to use the material UI Table component in order to display a table. The issue I am facing is that when the content in a cell exceeds the allotted space, instead of showing ellipses (...), the text wraps within the cell. I attempted to ap ...

cssreactjsmaterial-ui

Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework

Currently, I am working on a component that splits lines based on the parent container's width without overflowing. Despite successfully implementing this in a sandbox or pure react application (even with custom fonts), I encountered issues when using ...

javascriptcssreactjsgatsby

Maintain aspect ratio of SVG image with fixed height using a slice technique

I'm having trouble with an SVG that needs to have a fixed height to avoid looking too big when the width exceeds 2000 pixels on widescreens. I want the clipping mask to always be visible and the background image to be sliced rather than stretched. So ...

htmlcsssvg

SassError: Variable not defined

I have a file containing variables with different themes that I need to override: _vars.scss body { $bg-color: #fff } body.theme-dark { $bg-color: #333 } In my Angular button component, I am referencing these variables: button.scss @import '_va ...

cssangularsass

Enhancing HTML table interactivity: Updating class of cells upon hover

While attempting to update the class on hover, I noticed that the class changes from 1 to hovering cells However, I want the class to change from 1 to currently hovered cells If moving the mouse from 1 to 10 and then to 2, the currently hovered cells wil ...

jqueryhtmlcss

Repairing the Bootstrap Header

I'm having trouble getting my navbar-right elements to align with my navbar-brand section. I need assistance with this. I want them to align, but here's how the element should look: https://i.sstatic.net/Fettu.jpg header.html <header> ...

htmlcsstwitter-bootstrap

Navigate through the Jquery slider by continuously scrolling to the right or simply clicking

Is there a way to prevent my slider from continuously scrolling? I think it has something to do with the offset parameter but I'm having trouble figuring it out. Any assistance would be greatly appreciated. var $container = $(container); var resizeF ...

javascriptjqueryhtmlcss

How to fix CSS so that the background color changes when hovered

Hey everyone, I'm working on a custom mouse-like feature where I want the color to change to white when hovering over links. I'm having some trouble with my code - it works fine when selecting the parent element but not the child. Can anyone help ...

htmlcsscss-selectors

Dynamic resizing of DIVS occurs when the address bar is hidden on Mobile Chrome

As I work on designing a website, I have utilized sections with the same class and set their height to 100vh. Everything appears to be functioning correctly when viewed on a browser, however, issues arise when accessing the site on phones. Whenever I scro ...

javascriptjqueryhtmlcss

Certain rows in the table should maintain a consistent width, while others are allowed to vary

I am dealing with a table containing certain rows Some of these rows are visible, while others are hidden. The visible rows at the start are referred to as: mainTrs. Clicking on a visible row will make all rows with a class matching its id visible. Cli ...

javascriptjquerycsshtml-table

When using the SASS @debug directive, it has the ability to display two distinct values for a single variable

Encountering an issue while compiling a scss file to css, the error message reads as follows: Error: src/scss/_custom.scss Error: Incompatible units: 'rem' and 'px'. To address this, I inserted @debug directives above the problematic ...

csssass

Having difficulty creating a popover that is activated by clicking on the three dots, similar to the ones seen in Facebook posts

I have a Django template displaying a list of posts and I want to add three dots to each post. When clicked, a popover should appear with clickable options like Delete and Copy Link. To get a better idea of what I'm looking for, you can reference Inst ...

javascripthtmljquerycssbootstrap-4

Rails app automatically loading asset files

In the process of developing my Rails application with Twitter Bootstrap, I encountered an interesting situation. After adding a blank "custom.css" file to the "app/assets/stylesheets" folder, everything seemed normal. It wasn't until I customized the ...

htmlcssruby-on-railstwitter-bootstrap

What is causing the background image size to adjust when the carousel is toggled?

Can you help me understand why the background-image increases in size vertically when transitioning from url/path to url/path2? I need it to stay the same size as it toggles through all the images. What mistake am I making and how can I correct it? Snipp ...

htmlcssdebuggingbootstrap-4

navigation menu not displaying properly on small screens

Struggling to make my navigation menu fit properly on mobile devices like iPhones and iPads? Check it out. Here are the CSS properties I've set: #wrapper{ max-width: 1600px; min-width: 320px; width: 100%; margin: 0 auto; position: ...

javascriptjqueryhtmlcssmobile

Remove the footer specifically from the final page by utilizing CSS

I am currently working on generating a PDF. My goal is to remove the last page using CSS methods. I have attempted to use :last-child to achieve this, but unfortunately, it did not yield the desired results. Here is an excerpt of my code: body { font- ...

htmlcsspdfdompdf

Troubleshooting Firefox HTML Positioning Problem (Functioning Properly in IE and Chrome)

After implementing the code below, I encountered an issue. In IE and Chrome, when hovering over the "CODE" section, the div correctly appears at position 100 x 100. However, in Firefox, the div fails to move to the specified position. What changes should b ...

javascriptjqueryasp.nethtmlcss

What is the best way to activate a scrollbar exclusively for the final section in fullpage.js?

Is there a way to enable a scrollbar for the last section only in fullpage.js? This is what I attempted: $("#section3").fullpage({ scrollBar: true, fitToSection: false, }); Unfortunately, it didn't work as expected. ...

jqueryhtmlcssfullpage.js