Визуализация таблицы в Windows 10 с добавлением пробела

Question

Я использую срезы Photoshop - да, да, это 2018 год, и нам больше не нужны срезы и макеты таблиц ... кроме случаев, когда мы это делаем.Мое изображение - чрезвычайно большой образец нестандартного искусства, и я должен идентифицировать 50 с лишним людей в нем.

Итак, я сделал кусочки всех людей, которых мне нужно было идентифицировать на изображении, и создал HTML-таблицу и макет изображения в Photoshop.Все отлично работает на всех браузерах и платформах, КРОМЕ 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;
}

Я временно публикую свой сайт здесь .

Answer 1

Вздох.Мне пришлось отказаться от всего этого подхода.Казалось, ничто не помогло Windows 10 визуализировать сложную таблицу без пробелов между изображениями.Я закончил тем, что сделал большую карту изображения, используя Adobe Fireworks.Затем, конечно, мне пришлось отказаться от всплывающих подсказок Bootstrap, потому что они не работают с картами изображений.Вместо этого я использовал jqueryui Tooltips.

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>

Answer 2

Мне кажется, что вы выяснили это на большом экране (например, на мониторе компьютера), но когда дело касается экрана меньшего размера, все идет не так.Вам нужно будет воспользоваться функцией панели инструментов адаптивного устройства Google, чтобы выяснить, с какого размера экрана начинает страдать ваше изображение, а затем создать медиазапрос, чтобы настроить таргетинг на неправильные размеры экрана.https://www.w3schools.com/css/css_rwd_mediaqueries.asp - по этой ссылке вы сможете быстро ознакомиться с медиа-запросами (их довольно просто подобрать).На данный момент ваш код просто предполагает, что все размеры экрана будут работать одинаково, чего они не делают, потому что все никогда не было так просто; -)

Не стесняйтесь задавать любые дополнительные вопросы, если вы застряли!