Firefox中的CSS填充(边距?)问题 [英] CSS Padding(Margin?) Issues in Firefox

查看:132
本文介绍了Firefox中的CSS填充(边距?)问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

早期html的老手,我已经修改了我的博客模板并使其成为

看起来相当干净(虽然相当简单)用IE查看。


具有讽刺意味的是,我是一个很棒的Firefox粉丝,但是当我在FF中查看时,我的博客

还有很多不足之处。


博客(这是在 http://lazycomic.blospot.com/ )是一个基本的两个

列样式,右栏是'给我

问题的那一栏。


在IE中,它在右栏中的文本周围有很好的填充,并且它与左(主)列之间的间距很大。它也很好地位于窗口中间。


问题#1在FireFox中,右栏中的文字被抨击了

进入列的左边缘。项目符号项甚至进入

主列。 (我注意到FF用户继续阅读我的博客 -

我很欣赏它 - 但它看起来相当可怕。)


问题#2在IE中,右栏的颜色(#f5f5f5)整齐地跟着

,直到它完成,而FireFox似乎突然结束。


我确定我的博客模板有很多不良的语法问题,

但是纠正这两个问题的任何帮助都将是一个很好的步骤

正确的方向。

解决方案

sl ******* @ yahoo.com 写道:


>

博客(这是在 http://lazycomic.blospot.com/ )是一个基本的两个
列样式,右栏是'给我

问题的那一栏。



错误的URL 。

在IE中,它在右栏中的文本周围有很好的填充,并且它与左(主)列之间的间隔很大。它也很好地位于窗口中间。


问题#1在FireFox中,右栏中的文字被抨击了

进入列的左边缘。项目符号项甚至进入

主列。 (我注意到FF用户继续阅读我的博客 - 和

我很感激 - 但它看起来相当可怕。)



没有有用的URL我只是猜测......每个浏览器都有一个关于如何应用填充和边距以及多少的不同的想法。

在浏览器中实现大致统一的外观的方法是使用

html * {padding:0;保证金:0; } $ / $
并明确指定每个元素的边距和填充。


对于< ulin特别,FF和IE使用明显不同的值;我确实

不记得哪一个是哪一个使用填充来缩进< ul>,

其他使用保证金。如果你将margin或padding设置为0,一个浏览器会在左边没有缩进的情况下呈现

列表。

这个效果相当不错:

html * {padding:0;保证金:0; }

ol {padding-left:2.5em; } / *最多允许3位数。 * /

ul {padding-left:1.4em; / / *跨浏览器所需的最低要求。 * /


-

jmm(连字符)列表(at)sohnen-moe(点)com

(删除。 AXSPAMGN发送电子邮件)


Jim - 感谢您的提示。


这里是*正确的* URL:< a rel =nofollowhref =http://lazycomic.blogspot.com/target =_ blank> http://lazycomic.blogspot.com/


Jim Moe写道:

sl ******* @ yahoo。 com 写道:



博客(位于 http://lazycomic.blospot.com/ )是一个基本的两个

列样式,右列是''给我

的问题。



错误的URL。


在IE中,它在右栏中的文本周围有很好的填充,

它与左(主)列之间的间距。它也很好地位于窗口中间。


问题#1在FireFox中,右栏中的文字被抨击了

进入列的左边缘。项目符号项甚至进入

主列。 (我注意到FF用户继续阅读我的博客 -

我很感激 - 但它看起来相当可怕。)



没有有用的URL我只是猜测......每个浏览器都有一个关于如何应用填充和边距以及多少的不同的想法。

在浏览器中实现大致统一的外观的方法是使用

html * {padding:0;保证金:0; } $ / $
并明确指定每个元素的边距和填充。


对于< ulin特别,FF和IE使用明显不同的值;我确实

不记得哪一个是哪一个使用填充来缩进< ul>,

其他使用保证金。如果你将margin或padding设置为0,一个浏览器会在左边没有缩进的情况下呈现

列表。

这个效果相当不错:

html * {padding:0;保证金:0; }

ol {padding-left:2.5em; } / *最多允许3位数。 * /

ul {padding-left:1.4em; / / *跨浏览器所需的最低要求。 * /


-

jmm(连字符)列表(at)sohnen-moe(点)com

(删除。 AXSPAMGN电子邮件)


sl ***** **@yahoo.com 写道:


吉姆 - 谢谢你的提示。


这里'是*正确的*网址: http://lazycomic.blogspot.com/



点击此处,你会看到一些有问题的HTML代码:


HTML错误(200):
http://validator.w3.org/check ?uri = ht ... logspot.com%2F


CSS错误(12):
http:// jigsaw.w3.org/css-validat或/ v ... usermedium =全部


// Aho


A veteran of early html, I''ve modified my blog template and made it
look rather clean (albeit rather plain) when viewed with IE.

Ironically, I''m a big Firefox fan, but when viewed in FF, my blog
leaves a lot to be desired.

The blog (which is at http://lazycomic.blospot.com/ ) is a basic two
column style, with the right column being the one that''s giving me the
problems.

In IE, it has nice padding around the text in the right column and
decent spacing between it and the left (main) column. It also sits
rather nicely in the middle of the window.

PROBLEM #1 In FireFox, the text in the right column is slammed right
into the left edge of the column. The bulleted items even go into the
main column. (I''ve noticed the FF users continue to read my blog -- and
I appreciate it -- but it looks rather dreadful.)

PROBLEM #2 In IE, the color (#f5f5f5) for the right column follows
neatly until it''s done, while it FireFox it seems to end abruptly.

I''m sure there are a ton of poor syntax issues with my blog template,
but any help on correcting these two problems would be a great step in
the right direction.

解决方案

sl*******@yahoo.com wrote:

>
The blog (which is at http://lazycomic.blospot.com/ ) is a basic two
column style, with the right column being the one that''s giving me the
problems.

Bad URL.

In IE, it has nice padding around the text in the right column and
decent spacing between it and the left (main) column. It also sits
rather nicely in the middle of the window.

PROBLEM #1 In FireFox, the text in the right column is slammed right
into the left edge of the column. The bulleted items even go into the
main column. (I''ve noticed the FF users continue to read my blog -- and
I appreciate it -- but it looks rather dreadful.)

Without a useful URL I''m only guessing.... Each browser has a different
idea about how to apply padding and margins, and how much. A way to
achieve a mostly uniform look across browsers is to use
html * { padding: 0; margin: 0; }
and explicitly specify the margin and padding for every element.

For <ulin particular, FF and IE use distinctly different values; I do
not remember which is which but one uses padding to indent a <ul>, the
other uses margin. If you set margin or padding to 0, one browser renders
the list without indent on the left.
This works reasonably well:
html * { padding: 0; margin: 0; }
ol { padding-left: 2.5em; } /* Allows up to 3 digits. */
ul { padding-left: 1.4em; } /* Minimum needed across browsers. */

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)


Jim - Thank you for the tips.

Here''s the *correct* URL: http://lazycomic.blogspot.com/

Jim Moe wrote:

sl*******@yahoo.com wrote:


The blog (which is at http://lazycomic.blospot.com/ ) is a basic two
column style, with the right column being the one that''s giving me the
problems.

Bad URL.

In IE, it has nice padding around the text in the right column and
decent spacing between it and the left (main) column. It also sits
rather nicely in the middle of the window.

PROBLEM #1 In FireFox, the text in the right column is slammed right
into the left edge of the column. The bulleted items even go into the
main column. (I''ve noticed the FF users continue to read my blog -- and
I appreciate it -- but it looks rather dreadful.)

Without a useful URL I''m only guessing.... Each browser has a different
idea about how to apply padding and margins, and how much. A way to
achieve a mostly uniform look across browsers is to use
html * { padding: 0; margin: 0; }
and explicitly specify the margin and padding for every element.

For <ulin particular, FF and IE use distinctly different values; I do
not remember which is which but one uses padding to indent a <ul>, the
other uses margin. If you set margin or padding to 0, one browser renders
the list without indent on the left.
This works reasonably well:
html * { padding: 0; margin: 0; }
ol { padding-left: 2.5em; } /* Allows up to 3 digits. */
ul { padding-left: 1.4em; } /* Minimum needed across browsers. */

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)


sl*******@yahoo.com wrote:

Jim - Thank you for the tips.

Here''s the *correct* URL: http://lazycomic.blogspot.com/


Check here and you see some of your faulty html code:

HTML errors (200):
http://validator.w3.org/check?uri=ht...logspot.com%2F

CSS errors (12):
http://jigsaw.w3.org/css-validator/v...usermedium=all

//Aho


这篇关于Firefox中的CSS填充(边距?)问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆