Table 渲染 Windows 10 添加白色 space

Question

我正在使用 Photoshop 切片——是的，是的，现在是 2018 年，我们不再需要切片和 table 布局……除非我们需要。我的形象是一件非常大的定制艺术品，我必须识别其中的 50 多个人。

因此，我对图像中需要识别的所有人物进行了切片，并创建了 Photoshop 的 html table 和图像布局。除了 Chrome 在 Windows 10 上，在所有浏览器和平台上一切正常！有人知道发生了什么事吗？

请不要标记这个问题。如果我做错了什么，或者您有什么建议，请告诉我。

<table id="Table_01" width="2187" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">

* {
  margin:0;
  padding: 0;
}
#Table_01 {
    width: 2187px;
    height: 3649px;
    margin: 0;
    font-size: 0;
}
table td { 
    font-size:0px !important;
    line-height: 0px !important; 
}
img { 
    display:block !important; 
    vertical-align: top;
    float: left;
}

我暂时发布我的网站here。

Answer 1

在我看来，您似乎已经在较大的屏幕尺寸调整器（例如您的计算机显示器）上解决了这个问题，但是当涉及到较小的屏幕尺寸时，一切都出错了。您需要做的是使用 Google 的响应式设备工具栏功能来找出您的图像开始受到影响的屏幕尺寸，然后创建一个媒体查询来定位不正确的屏幕尺寸. https://www.w3schools.com/css/css_rwd_mediaqueries.asp - 这个 link 会给你一个媒体查询的快速介绍（它们很容易上手）。目前，您的代码只是假设所有屏幕尺寸的行为都相同，但事实并非如此，因为事情从来都不是那么容易;-)

如果遇到困难，请随时提出任何后续问题！

Answer 2

唉。我不得不放弃这整个方法。似乎没有任何帮助 Windows 10 渲染一个复杂的 table，图像之间没有白色 space。我最终使用 Adobe Fireworks 制作了一张大图像地图。然后，当然，我不得不放弃 Bootstrap 工具提示，因为它们不适用于图像映射。我改用 jqueryui 工具提示。

html:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    

<img name="fireworks" src="img/fireworks.jpg" width="2186" height="3648" border="0" id="fireworks" usemap="#m_fireworks" alt="" />
    <map name="m_fireworks" id="m_fireworks">
    <area shape="rect" coords="930,288,1244,544" title="<span class='tt-header'>Person 1</span><br/><span class='tt-body'>my title</span>" alt="dippy" id="" />
    <area shape="rect" coords="1507,2131,1566,2249" title="<span class='tt-header'>Person 2</span><br/><span class='tt-body'>my title</span>" alt="nellie" id="" />
    ...
    </map>

Table 渲染 Windows 10 添加白色 space

Table rendering on Windows 10 adding white space

html

windows

windows-10

css-tables