CSS: Margin problem with Safari

给你一囗甜甜゛ 提交于 2020-01-14 04:35:28

问题


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:


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




回答4:


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.



来源:https://stackoverflow.com/questions/5413954/css-margin-problem-with-safari

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!