Webkit white space issue_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-12 20:48 出处：网络

Hey guys, getting a error in webkit browsers (chrome/safari) where the padding is being cut off from anchor tags.

Here's an example:

    <html>
    <head>
        <style type="text/css">
        body 
        {   
            background-color: #F4F4E7;  
            margin: 0;  padding: 0;
            font-family: Arial, sans-serif;
        }   
        .restrictedSpace
        {
            margin: 40px;
            width: 300px;
            border: 1px solid #999;
            line-height: 28px;
            white-space: normal;
        }
        .restrictedSpace a
        {
            font-weight: normal;
            font-size: 11px;
            background-position: 7px 7px;
            padding: 5px 7px;
            background-color: #000;
            color: #fff;
            text-decoration: none;
        }
        </style>
    </head>
    <body>
    <div class="restrictedSpace">
        <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a>  <!-- extra space here--> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a>
    </div>
    </body>
</html>

You'll notice the third button is getting sliced on the right 开发者_开发百科hand side. This is when I have more than one space in between the two buttons (when reduced to one space, the button doesn't get sliced).

Any thoughts?

EDIT:

I've also done a comparison in each of the major browsers. They all have some different in rendering.

http://i.stack.imgur.com/WyNGK.jpg

Your anchor tags are inline. Just like text in a paragraph, inline text will not collapse white space, but respect it. Set your anchors to display:block;float:left;, and the white space should disappear.

As to why Webkit decides to render it that way, I'm not sure, but it may be attempting something that generally works with inline text (e.g., if this were just a paragraph with underlined links). (Why Opera does it's own weird thing is again a mystery to me but, well, par for the course for Opera.)

I think you must have stumbled upon a bug. Notice if you increase the right padding of the anchor elements, it suddenly snaps wide again at 11px (padding: 5px 11px 5px 7px).

You can see it even more clearly if you adjust the right padding of that one anchor only (leaving the others at 7px). It will still slice at 16px, but not at 17px.

I have had the same problem, but never found a solution. I think in the end I just floated the elements.

Inline elements automatically add 4px of white space to the right of the element, so I'm guessing that when you add the extra space, it adds enough to send the last element out of the containing parent. It's just a guess, but I think that's what happens :)

The way that I fixed this is: