经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › id下再跟a标签,不支持padding的上下宽度设置?

查看: 1624|回复: 15

[讨论] id下再跟a标签,不支持padding的上下宽度设置? [复制链接]

Amyni　楼主

中级会员

帖子: 101
体力: 224
威望: 0

发表于 2008-3-20 11:11:38 |显示全部楼层

提示：您可以先修改部分代码再运行

[ 本帖最后由 Amyni 于 2008-3-20 11:16 编辑 ]

西部数码顶级域名注册商39元抢注！

使用道具举报

Amyni　楼主

中级会员

帖子: 101
体力: 224
威望: 0

发表于 2008-3-20 11:15:41 |显示全部楼层

请各位试着将#hright a{ }中的padding的值改一下,会发现,对于左右的设置是没问题的,但对于上下的设置是无效的,在各个浏览器中均无效,不知是怎么回事?

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

kuhanzhu　

苦寒竹

管理员

帖子: 19767
体力: 17922
威望: 23
居住地: 浙江省金华市

发表于 2008-3-20 11:15:44 |显示全部楼层

a标签是内联的。要使用padding或width，必须使用display : block

搞IT的穷秀才。

使用道具举报

tsun1024　

高级会员

帖子: 325
体力: 1027
威望: 0
居住地: 江苏省南京市

发表于 2008-3-20 11:18:59 |显示全部楼层

我在IE7下看没问题～
height:auto,width:auto起啥作用？

使用道具举报

Amyni　楼主

中级会员

帖子: 101
体力: 224
威望: 0

发表于 2008-3-20 11:22:35 |显示全部楼层

回复 #3 kuhanzhu 的帖子

谢谢kuhanzhu ,在#hright a{ }中加上display : block的语句后,问题解决了.
再问一下,在内联标签中,除了使用padding或width属性需要"块化"外,还有其他属性需要"块化"才能实现吗?关于这方面的知识我欠缺在哪里呢?没有充分理解盒模型,还是选择器?

使用道具举报

Amyni　楼主

中级会员

帖子: 101
体力: 224
威望: 0

发表于 2008-3-20 11:23:56 |显示全部楼层

回复 #4 tsun1024 的帖子

height:auto,width:auto的目的是使背景可以按照元素(文本)的尺寸自适应.

使用道具举报

tsun1024　

高级会员

帖子: 325
体力: 1027
威望: 0
居住地: 江苏省南京市

发表于 2008-3-20 11:24:30 |显示全部楼层

回复 #3 kuhanzhu 的帖子

设置padding不需要内部元素一定为block吧。。。

。。。我真犯迷糊了～我这里看都没有什么问题，改成padding:10px也可以～晕

[ 本帖最后由 tsun1024 于 2008-3-20 11:26 编辑 ]

使用道具举报

Amyni　楼主

中级会员

帖子: 101
体力: 224
威望: 0

发表于 2008-3-20 11:34:19 |显示全部楼层

回复 #7 tsun1024 的帖子

好像必须使用block才能实现padding的控制.

使用道具举报

Amyni　楼主

中级会员

帖子: 101
体力: 224
威望: 0

发表于 2008-3-20 11:38:08 |显示全部楼层

tsun1024 你试试其他浏览器,开发网页的时候不要只安装一个浏览器呀~

使用道具举报

dous　

初级会员

帖子: 88
体力: 376
威望: 0

发表于 2008-3-20 11:49:51 |显示全部楼层

是具备块元素
还是要触发 hasLayout ？迷糊了
测试把div 设成内联元素，再zoom触发haslayout，为什么却可以支持padding了？

提示：您可以先修改部分代码再运行

[ 本帖最后由 dous 于 2008-3-20 11:52 编辑 ]

研究各版主发的帖子

使用道具举报

Amyni　楼主

中级会员

帖子: 101
体力: 224
威望: 0

发表于 2008-3-20 12:29:20 |显示全部楼层

回复 #10 dous 的帖子

我用ff,发现虽然有距离,但数值不对呢,比如你都设置成40PX,div文本却没有居中,而且,你也没有把div设成内联元素呀,没有使用id,你用的是标签吧~

使用道具举报

tsun1024　

高级会员

帖子: 325
体力: 1027
威望: 0
居住地: 江苏省南京市

发表于 2008-3-20 12:32:21 |显示全部楼层

回复 #9 Amyni 的帖子

恩～做个测试吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
*{margin:0;padding:0;}
div{
   margin:10px;
   width:300px;
   height:80px;
   border:1px solid red;
}
div#d1{padding:0px;}
div#d2{padding:10px}
div#d3{padding:20px}
div#d4{height:160px;padding:30px;}
p{width:200px;height:80px;border:1px solid blue;padding:20px;}
a{background:pink;}
div#d2 a{display:inline-block;}
div#d2 a{display:block;}

-->
</style>
</head>
<body>
<div id="d1">家 a test~just a test~just a test~just a test~just a test~just a test~just a

test~</div>
<div id="d2"><a href="#"> a test~just a test~just a test~just a test~just a test~just a

test~just a test</a></div>
<div id="d3"><a href="#"> a test~just a test~just a test~just a test~just a test~just a

test~just a test</a></div>
<div id="d4"><p>a test~just a test~just a test~just a test~just a test~just a 
te</p></div>
</body>
</html>

提示：您可以先修改部分代码再运行

我这里没有IE6,没有op..在IE7/FF下的表现和样式定义是一样的-------也可以发现padding对文本流，对内联元素也是起作用的----
对你的例子我也很奇怪，不知道为什么你那里padding就无效（我这里是有效的。。），偏偏还给a加个display:block就可以解决。。。

使用道具举报

zbm2001z　

宝儿

荣誉管理

帖子: 1600
体力: 11357
威望: 43

发表于 2008-3-20 12:46:39 |显示全部楼层

刚好前台区有人问了个类似的问题http://bbs.blueidea.com/thread-2839114-1-1.html
没时间详解，自己先理解下
http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
10.6.1 Inline, non-replaced elements
The 'height' property doesn't apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height.

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, not the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

If more than one font is used (this could happen when glyphs are found in different fonts), the height of the content area is not defined by this specification. However, we suggest that the height is chosen such that the content area is just high enough for either (1) the em-boxes, or (2) the maximum ascenders and descenders, of all the fonts in the element. Note that this may be larger than any of the font sizes involved, depending on the baseline alignment of the fonts.

简单的说就是：行内非替换元素的在文档流中的占位高度取决于行高“line-height”，
而其垂直方向的padding, border and margin 是基于其内容的区域——这里即文本框（文字本身）

而CSS2规范却在这里留下了悬疑：
10.6.1 行内的非替换元素
如果'top'，'bottom'，'margin-top'或'margin-bottom'为'auto'，它们的计算值为0。'height'属性并不适用，但是框的高度由'line-height'属性给出。
10.6.2 ……

提示：您可以先修改部分代码再运行

[ 本帖最后由 zbm2001z 于 2008-3-20 12:53 编辑 ]

我家宝儿：http://blog.sina.com.cn/u/1258716075

使用道具举报

dous　

初级会员

帖子: 88
体力: 376
威望: 0

发表于 2008-3-20 13:04:01 |显示全部楼层

文本流的体现不一样，哎，这么简单的问题，原来这么复杂

研究各版主发的帖子

使用道具举报

Amyni　楼主

中级会员

帖子: 101
体力: 224
威望: 0

发表于 2008-3-20 13:28:45 |显示全部楼层

回复 #12 tsun1024 的帖子

tsun1024同学,你的代码真的太乱了,怎么被你写的这么复杂呢.其实你还是用了display呀,"div#d2 a{display:inline-block;}
div#d2 a{display:block;}"这不都是吗?还有,"div#d1{padding:0px;}"写成"#d1{padding:0px;}"就可以了呀,同样"div#d2 a{display:block;}"写成"#d2 a{display:block;}"就可以了,你的代码这么不友好,以后承接工作的时候多费劲呀~~~

使用道具举报