All geek questions in one place

Css border-style double 1px gap chrome

3px is a double border on the left or right side of the div, however in chrome it leaves a 1px gap at the top of the border. I tried many times to see if this is a browser bug or some kind of solution.

http://jsfiddle.net/QSm2Z/2/

If you view the code in firefox / ie, you get a continuous black bar, in chrome and on my phone / tablet, I get a 1px space at the top of each div that breaks the black bar

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> .test { height: 100px; width: 100px; border-right: 3px double #c7c7c7; border-left: 3px double #c7c7c7; background-color: #06F; padding: 0px; margin: 0px; border-bottom-style: } </style> </head> <body> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </body> </html>
+4
source share
2 answers

Observations

There seems to be a glitch in the corner formation algorithm that leaves the migrated edge in preparation for the border with the perpendicular edge, even if it is not there.

I doubt this is the intended behavior, although spec states that:

This specification does not define how borders of different styles should be connected in a corner.

You can see evidence of a sliding connection with a 2-pixel solid border (screenshot):

enter image description here

If you look very carefully, you can see a manifestation of another potential problem: the edges of the upper and side borders do not touch (screenshot):

enter image description here

Bypass

This is a complicated / inelegant comparison, but one way to fix the problem is to hide both the top and bottom edges of the offensive elements. You will need to adjust the sizes for your actual site.

Example: http://jsfiddle.net/QSm2Z/10/

 .test{ position: relative; height: 100px; width: 152px; overflow: hidden; } .test:after { width: 100px; height: 102px; content: ""; top: -1px; position: absolute; background-color: #06F; border-left: 26px double #000; border-right: 26px double #000; }
+3
source

Looks like a browser error - this does not happen with solid borders - check this: http://jsfiddle.net/QSm2Z/8/

Perhaps related to this error: https://code.google.com/p/chromium/issues/detail?id=61702

0
source

Source: https://habr.com/ru/post/1481040/

More articles:


All Articles