CSS: Margin problem with Safari

问题:

On the site I'm working on, for some reason the margin is needing to be different for Safari than in FF, IE8, Chrome & Opera? I have a link that I want lined up next to a label. It's lining up fine in all but Safari which needs a 12 pixel difference. Here's a screenshot to better describe the issue: Click

The Safari screenshot shows the label down too low. This is the CSS I use for the working 4 browsers:

.submitter a {
    float: right;
    margin: -2px 0 0 2px;
    padding: 0 !important;
}

And here's the code that works for Safari, however, usig it throws the link UP 12 pixels.

.submitter a {
    float: right;
    margin: -14px 0 0 2px; Works in Safari & Chrome
    padding: 0 !important;
}

Anyone able to shed some light on this? TIA

回答1:

This seems to sort it out:

.submitter a {
    float: none;
    display: inline !important;
    margin: 0 0 0 2px;
}

It's really very convoluted in there due to nonsensical use of the cascade.

Some rules are being applied to elements where they really shouldn't be due to selectors like:

.box_777 ul li a

You'd be better replacing that selector with something like:

.individual-likes > a

But, it's difficult to predict how improving your selectors will change how your page displays.

回答2:

The reason it goes up like that could be because of the - pixel value. Are they nested correctly in the div? And did you apply the same alignment (CSS, Html, etc.) for the Chrome buttons?

回答3:

Looking at the site, the anchor is being set to block by .box_777 ul li a and then floated right by .submitter a.
If I remove the display: block; and float: right; things align.

回答4:

There is a lot going on, but you might try one of the following:

.submitter .smalltext { float: left; }

(or)

Move the "follow" anchor tag before the "smalltext" span