The positioning of the "inline-block" element varies between IE and Microsoft Edge

Question

The positioning of the "inline-block" element varies between IE and Microsoft Edge

I came across a similar question on Stack Overflow about IE rendering inline-block div differently than FF/Chrome, but unfortunately it didn't provide the solution I needed.

Below is the CSS code for my element (which appears as an invisible square link in HTML):

#box-scenario {
position: absolute;
margin-top: 43%;
margin-left: 37%;
background-color: rgba(255, 0, 0, 0);
width: 11%;
height: 21%;
display: inline-block; }

The positioning of this invisible square link seems to be around 200px higher compared to FF/Chrome.

html css internet-explorer microsoft-edge

Answer 1

Answer №1

Check out this Fiddle in various browsers. I included a striped parent div and added a red outline around the invisible link for reference.

The position of the invisible square link is approximately 200px higher in FF/Chrome.

In my observation, across all browsers, the link appears at 3.5 bars above the bottom. Where does it appear for you?

#parent {
  outline: thin solid black;
  position: relative;
  height: 180px;
  width: 180px;
  background: repeating-linear-gradient(to top, white, white 10px, yellow 10px, yellow 20px);
}
#box-scenario {
  position: absolute;
  margin-top: 43%;
  margin-left: 37%;
  background-color: rgba(255, 0, 0, 0);
  width: 11%;
  height: 21%;
  display: inline-block;
  outline: thin solid red;
}

<div id="parent">
  <a id="box-scenario"></a>
</div>

Answer 2

Check out this Fiddle in various browsers. I included a striped parent div and added a red outline around the invisible link for reference.

The position of the invisible square link is approximately 200px higher in FF/Chrome.

In my observation, across all browsers, the link appears at 3.5 bars above the bottom. Where does it appear for you?

#parent {
  outline: thin solid black;
  position: relative;
  height: 180px;
  width: 180px;
  background: repeating-linear-gradient(to top, white, white 10px, yellow 10px, yellow 20px);
}
#box-scenario {
  position: absolute;
  margin-top: 43%;
  margin-left: 37%;
  background-color: rgba(255, 0, 0, 0);
  width: 11%;
  height: 21%;
  display: inline-block;
  outline: thin solid red;
}

<div id="parent">
  <a id="box-scenario"></a>
</div>

Answer 3

Answer №2

If you're struggling with inconsistencies in your design, a simple solution could be to reset all padding and margin in your CSS using the following code snippet:

* { 
  margin: 0; 
  padding: 0; 
}

By applying this rule, you will eliminate any default spacing applied by browsers, creating a uniform starting point for your design. This approach ensures that your layout is clean, intentional, and consistent across different browsers. It's a best practice that can greatly improve the visual coherence of your website.

Additionally, consider utilizing -webkit-margin(s) and -moz-margin properties for browser-specific adjustments as needed.

Answer 4

If you're struggling with inconsistencies in your design, a simple solution could be to reset all padding and margin in your CSS using the following code snippet:

* { 
  margin: 0; 
  padding: 0; 
}

By applying this rule, you will eliminate any default spacing applied by browsers, creating a uniform starting point for your design. This approach ensures that your layout is clean, intentional, and consistent across different browsers. It's a best practice that can greatly improve the visual coherence of your website.

Additionally, consider utilizing -webkit-margin(s) and -moz-margin properties for browser-specific adjustments as needed.

The positioning of the "inline-block" element varies between IE and Microsoft Edge

Answer №1

Answer №2

Similar questions

JavaScript - Uncaught TypeError: type[totypeIndex] is not defined

Align images to the bottom of the gallery only if their heights differ

What is the process for altering fonts in a Chrome OS application?

Execute javascript function upon user scrolling to a designated section in the webpage

The <span> element stubbornly resists aligning inline within a flexbox container

How to position a textarea alongside a checkbox using CSS with Bootstrap

Tips for creating a custom design for Material UI TextField using Modular CSS

"Enhance your website with captivating Javascript hover effects for

Tips for maintaining responsive resizing in Bootstrap 4 when the screen size decreases for an image that doubles as a hyperlink

Alter the background image of items upon hovering over an item in a dropdown menu

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Is a single f.select impacting another f.select in the same form? (undesired)

Merge multiple list groups into one with a single active selection using Bootstrap List group functionality

What is the best way to postpone the rendering of a table?

PHP Code to Implement Toggle Bold on Click for References

Disabling vertical scrolling is achieved by binding this mousewheel event handler

Selenium is detecting a textbox as hidden, despite it being visible in the browser on my end

How to make a list with a scroll bar in an HTML table cell

Verifying whether the file is an HTML image file type

How to interact with dropdown menu using Rselenium