xhtml strict和css中的无缝图像表 [英] seamless images tables in xhtml strict and css
问题描述
下面的XHTML文件创建了一个2x2的方形图像矩阵。
总是在单元格的底部边框有一些空格（使用Gecko和KHTML渲染
，而不是IE），到目前为止我找不到任何方法到
让它消失。如果我使用XHTML 1.0 Transitional而不是Strict
，单元格下面的额外空间就会消失。
是否无法在XHTML Strict中创建无缝图像表？
<？xml version =" 1.0"？>
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns =" http：//www.w3.org/1999/xhtml">
< head>
< style type =" text / css" ;>
table.puzzle {
border-collapse：collapse;
border：1px solid red;
}
。puzzle td {
填充：0;
}
img {
}
< / style>
< / head>
< body>
< table class =" puzzle">
< tr>
< td>< img src =" p00.jpg" />< / td>
< td>< img src =" p10.jpg" />< / td>
< / tr>
< tr>
< td>< img src = " p01.jpg" />< / td>
< td>< img src =" p11.jpg" />< / td>
< / tr>
< / table>
< / body>
< / html>
-
------------------ -------------------------------------------------
Peter Maas，M + R Infosysteme，D-52070 Aachen，电话+ 49-241-93878-0
电子邮件''cGV0ZXIubWFhc0BtcGx1c3IuZGU = \ n''。 decode（''base64''）
---------------------------------- ---------------------------------
Peter Maas< pe *** @ somewhere.com>写道：
下面的XHTML文件创建了一个2x2的方形图像矩阵。
不要将代码发布到小组，发布一个最小化示例的网址，
演示了这个问题。
在单元格的底部边界总是有一些空间（使用Gecko和KHTML渲染时，而不是IE）
只是一个猜测，因为你的代码无法证明这个问题：
img {vertical-align：text-bottom}或其他合适的值。
注意这个是一个风格问题，因此应该发布到
ciwas。
-
Spartanicus
Peter Maas< pe *** @ somewhere.com>写道：
下面的XHTML文件创建了一个2x2的方形图像矩阵。在单元格的底部边界总是有一些空间（使用Gecko和KHTML渲染时，而不是使用IE），到目前为止我没有发现任何方法使它消失。如果我使用XHTML 1.0 Transitional而不是Strict
单元格下方的额外空间消失。
是否无法在XHTML Strict中创建无缝图像表？
是的。这个问题与XHTML Strict没有任何关系。如果您使用带有doctype
的HTML Transitional来触发标准模式，则可以看到相同的
bahaviour。
在标准模式下浏览器正确应用CSS格式化。这个
意味着图像位于文本基线上，无论是否存在任何其他文本
。必须始终留下一些空间
低于基线。
要修复它，会使图像块级元素。即在你的情况下
..puzzle img {display：block;}
当然要问你为什么要使用XHTML Strict和什么
似乎是一个布局表。但是上面的问题将发生在
任何元素不仅仅是表格单元格，所以即使你转到
无表格布局，你仍然需要记住它。
史蒂夫
-
我的理论给你起见，我的异端邪说激怒了你，
我永远不会回答信件，你不喜欢我的领带。 - 医生
Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>
Peter Maas写道：
....是否无法在XHTML Strict中创建无缝图像表？
<？xml version =" 1.0"？>
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN"
" http：//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...并且xml prolog的存在将导致WinIE进入
怪癖模式。 {可能不是你想要的。）
http： //www.quirksmode.org/css/quirksmode.html
大约在页面的中间位置：
" Explorer Windows special：the xml prolog
在Explorer 6 Windows中，Microsoft实施了一条额外规则：如果触发严格模式的
doctype前面有一个xml prolog，那么
页面以怪癖模式显示。这样做是为了让网页开发者能够实现有效页面（需要doctype），但仍然保持在
怪癖模式中。
我不知道最后一句话。 < g取代;是真的有意吗？
-
-bts
-这个空间故意留空。
The XHTML file below creates a 2x2 matrix of square images. There is
always some space at the bottom borders of the cells (when rendered
with Gecko and KHTML, not with IE) and I''ve found no way so far to
make it disappear. If I use XHTML 1.0 Transitional instead of Strict
the extra space below the cells disappears.
Is it impossible to create seamless images tables in XHTML Strict?
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table.puzzle{
border-collapse: collapse;
border: 1px solid red;
}
.puzzle td {
padding: 0;
}
img {
}
</style>
</head>
<body>
<table class="puzzle">
<tr>
<td><img src="p00.jpg" /></td>
<td><img src="p10.jpg" /></td>
</tr>
<tr>
<td><img src="p01.jpg" /></td>
<td><img src="p11.jpg" /></td>
</tr>
</table>
</body>
</html>
--
-------------------------------------------------------------------
Peter Maas, M+R Infosysteme, D-52070 Aachen, Tel +49-241-93878-0
E-mail ''cGV0ZXIubWFhc0BtcGx1c3IuZGU=\n''.decode(''base64'')
-------------------------------------------------------------------
Peter Maas <pe***@somewhere.com> wrote:
The XHTML file below creates a 2x2 matrix of square images.
Don''t post code to the group, post a url of a minimized example that
demonstrates the issue.
There is
always some space at the bottom borders of the cells (when rendered
with Gecko and KHTML, not with IE)
Just a guess since your code would be useless to demonstrate the issue:
img{vertical-align:text-bottom} or another appropriate value.
Note that this is a style issue and should thus have been posted to
ciwas.
--
Spartanicus
Peter Maas <pe***@somewhere.com> wrote:
The XHTML file below creates a 2x2 matrix of square images. There is
always some space at the bottom borders of the cells (when rendered
with Gecko and KHTML, not with IE) and I''ve found no way so far to
make it disappear. If I use XHTML 1.0 Transitional instead of Strict
the extra space below the cells disappears.
Is it impossible to create seamless images tables in XHTML Strict?
Yes. This issue has nothing at all to do with XHTML Strict. The same
bahaviour can be seen if you used HTML Transitional with a doctype
that triggers standards mode.
In standards mode the browsers apply the CSS formating correctly. This
means that the image sits on the text baseline regardless of whether
there is any other text present or not. Some space must always be left
below the baseline.
To fix it make images block level elements. i.e. in your case
..puzzle img {display: block;}
Of course one has to ask why you are using XHTML Strict and what very
much seems to be a layout table. But the issue above will occur with
any element not just table cells so even when you move onto a
tableless layout you will still need to remember this.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don''t like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Peter Maas wrote:
....Is it impossible to create seamless images tables in XHTML Strict?
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...and the presence of the xml prolog will cause WinIE to go into
quirks mode. {Probably not what you want.)
http://www.quirksmode.org/css/quirksmode.html
about halfway down the page:
"Explorer Windows special: the xml prolog
In Explorer 6 Windows, Microsoft implemented one extra rule: if a
doctype that triggers strict mode is preceded by an xml prolog, the
page shows in quirks mode. This was done to allow web developers to
achieve valid pages (which require a doctype) but nonetheless stay in
quirks mode."
I wonder about that last sentence, though. <g> Was it really intentional?
--
-bts
-This space intentionally left blank.
这篇关于xhtml strict和css中的无缝图像表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
