Таблицы Wordpress разные в Chrome

Я хотел избавиться от всего пространства, которое вы получаете от текстовых виджетов внизу, поскольку в моих блогах их больше одного.

поэтому я сделал таблицы в шаблоне боковой панели, и мои сайты стали выглядеть намного лучше, чем стандартные WordPress с виджетами.

но в хроме они все отображаются по-разному, буду публиковать по одному

вот так это должно выглядеть в Firefox или Pale Moon

так это отображается в Chrome или Safari

  <style>


.floating-box {


display: inline-block;


}


</style>


<div class="floating-box" style="padding-left: 17px;">


<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>


<div id="fb-root"></div>


<script >(function(d, s, id) {


var js, fjs = d.getElementsByTagName(s)[0];


if (d.getElementById(id)) return;


js = d.createElement(s); js.id = id;


js.src = "http://connect.FB.net/en_US/sdk.js#xfbml=1&appId=1418206975108700&version=v2.0";


fjs.parentNode.insertBefore(js, fjs);


}(document, 'script', 'FB-jssdk'));</script>


</div>


<div class="floating-box" style="padding-top: 9px;">






<a href="[URL='https://lumtu.com/yti/Q3gg3QVFodHRwczovL3BheXBhbC5jb20vY2dpLWJpbi93ZWJzY3I_Y21kPV9zLXhjbGljayZob3N0ZWRfYnV0dG9uX2lkPVcyTEtWM0ZMRjMZ0']https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=W2LKV3FLF87AQ[/URL]"><img src="[URL='https://lumtu.com/yti/awZZwaWZodHRwOi8vaTcwOS5waG90b2J1Y2tldC5jb20vYWxidW1zL3d3OTUvdHVuZXNjb29sL2J0bl9kb25hdGVfTEcuETf']http://i709.photobucket.com/albums/ww95/tunescool/btn_donate_LG.gif[/URL]"></a>


</div>


<table style="font-family: Georgia;">


<tbody>


<tr>


<td style="padding-left: 17px;" colspan="3">






<a href="[URL='https://lumtu.com/yti/bwbbwb2todHRwczovL3R3aXR0ZXIuY29tL3RoZW5vdGFibGVuGbi']https://twitter.com/thenotablenook[/URL]" target="_blank"><img src="[URL='https://lumtu.com/yti/bAccAbmdodHRwOi8vaTcwOS5waG90b2J1Y2tldC5jb20vYWxidW1zL3d3OTUvdHVuZXNjb29sL25vb2svdHcuHdv']http://i709.photobucket.com/albums/ww95/tunescool/nook/tw.png[/URL]"></a>







<a style="margin-left: 7px;"href="[URL='https://lumtu.com/yti/NUjjUNjJodHRwczovL2ZhY2Vib29rLmNvbS9ncm91cHMvMTY3NTcyMzkzOTQwNQTO']https://www.FB.com/groups/1675723939406562[/URL]" target="_blank"><img src="[URL='https://lumtu.com/yti/bAccAbmdodHRwOi8vaTcwOS5waG90b2J1Y2tldC5jb20vYWxidW1zL3d3OTUvdHVuZXNjb29sL25vb2svZmIumZv']http://i709.photobucket.com/albums/ww95/tunescool/nook/fb.png[/URL]"></a>







<a style="margin-left: 7px;"href="[URL='https://lumtu.com/yti/b8228bC9odHRwczovL3BpbnRlcmVzdC5jb20vdHVuZXNjbNXZ']https://www.pinterest.com/tunescool/[/URL]" target="_blank"><img src="[URL='https://lumtu.com/yti/bw55wbmdodHRwOi8vaTcwOS5waG90b2J1Y2tldC5jb20vYWxidW1zL3d3OTUvdHVuZXNjb29sL25vb2svcCvs2']http://i709.photobucket.com/albums/ww95/tunescool/nook/p.png[/URL]"></a>







<a style="margin-left: 7px;"href="[URL='https://lumtu.com/yti/bUGGUb3NodHRwczovL3lvdXR1YmUuY29tL2NoYW5uZWwvVUNhaHJNRTRJVXBPeGotdTV5Wk92LUd3L3ZpZZ3L']https://www.youtube.com/channel/UCahrME4IUpOxj-u5yZOv-Gw/videos[/URL]" target="_blank"><img src="[URL='https://lumtu.com/yti/bAccAbmdodHRwOi8vaTcwOS5waG90b2J1Y2tldC5jb20vYWxidW1zL3d3OTUvdHVuZXNjb29sL25vb2svWVR1YmUumY1']http://i709.photobucket.com/albums/ww95/tunescool/nook/YTube.png[/URL]"></a>


</td>


</tr>


<tr>


<td style="padding-left: 7px; padding-right: 7px;">


<center><script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>


<!-- All Ads 3 -->


<ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 60px;" data-ad-client="ca-pub-2495074407921808" data-ad-slot="8350786373"></ins>


<script>


(adsbygoogle = window.adsbygoogle || []).push({});


</script></center>


</td>


</tr>


<tr>


<td style="padding-left: 7px; padding-right: 7px; color: #000000; border-top: 1px solid black; font-size: 12px; font-weight: bold; font-style: italic;" colspan="3">


Some Of The Vendors Have Discontinued E&amp;J Or The Row, The Pages Will Update Soon With New Products<br/><br/>


Nirvana Is Available<br/><br/>


Sometime Soon More Products Are Going To Be Available, Everything About The Store Is Changing And Will Be Different


</td>


</tr>


<tr>


<td style="padding-left: 15px; color: #000000; border-top: 1px solid black; font-size: 20px; font-weight: bold; font-style: italic;" colspan="3">Elizabeth &amp; James</td>


</tr>


<tr>


<td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Accessories</td>


</tr>


<tr>


<td style="width: 35%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZEmmEZ3NodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vY02b']http://olsenfashionnook.com/bags[/URL]">Bags</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZAZZAZXNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vc2hh2cv']http://olsenfashionnook.com/shades[/URL]">Sunglasses</a></td>






<td style="width: 35%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZwYYwZXNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vbmVja2xh2aj']http://olsenfashionnook.com/necklaces[/URL]">Necklaces</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZulluZ3NodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vZWFycmyFW']http://olsenfashionnook.com/earrings[/URL]">Earrings</a></td>






<td style="width: 30%; padding-right: 71px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/dQZZQdHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vYnJhY2Vs2Yh']http://olsenfashionnook.com/bracelets[/URL]">Bracelets</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZulluZ3NodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcmv02']http://olsenfashionnook.com/rings[/URL]">Rings</a></td>


</tr>


<tr>


<td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Nirvana</td>


</tr>


<tr>






<td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/YgbbgY2VodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vZnJhZ3Jh3Zh']http://olsenfashionnook.com/fragrance[/URL]">Fragrance</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/a8WW8aWxodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vYm9ke9mY']http://olsenfashionnook.com/bodyoil[/URL]">Body Oil</a></td>






<td style="width: 75%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;" colspan="2"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/bAXXAb29odHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vZHJ5c2hhbh2c']http://olsenfashionnook.com/dryshampoo[/URL]">Dry Shampoo</a></td>


</tr>


<tr>


<td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Clothes</td>


</tr>


<tr>


<td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/dgccgdHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vc2tp2cv']http://olsenfashionnook.com/skirts[/URL]">Skirts</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZM33MZXNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vZHJlcJHZ']http://olsenfashionnook.com/dresses[/URL]">Dresses</a></td>


<td style="width: 30%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/duFFudHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcGv02']http://olsenfashionnook.com/pants[/URL]">Pants</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/bhVVhbnNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vamv02']http://olsenfashionnook.com/jeans[/URL]">Jeans</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/dgccgdHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vc2hv2cv']http://olsenfashionnook.com/shorts[/URL]">Shorts</a></td>


<td style="width: 45%; padding-right: 71px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/c8GG8cHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vd02b']http://olsenfashionnook.com/tops[/URL]">Tops</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/dh99hdHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vY2v02']http://olsenfashionnook.com/coats[/URL]">Coats</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/cUmmUcnNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vYmxhexmY']http://olsenfashionnook.com/blazers[/URL]">Blazers</a></td>


</tr>


<tr>


<td style="padding-left: 15px; color: #000000; border-top: 1px solid black; font-size: 20px; font-weight: bold; font-style: italic;" colspan="3">The Row</td>


</tr>


<tr>


<td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Accessories</td>


</tr>


<tr>






<td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZEmmEZ3NodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93Y9mc']http://olsenfashionnook.com/rowbags[/URL]">Bags</a></td>







<td style="width: 75%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZM33MZXNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93c3VuZ2xhcx2Z']http://olsenfashionnook.com/rowsunglasses[/URL]">Sunglasses</a></td>


</tr>


<tr>


<td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Clothes</td>


</tr>


<tr>






<td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/dgccgdHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93c2tp2c3']http://olsenfashionnook.com/rowskirts[/URL]">Skirts</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZM33MZXNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93ZHJlcJHZ']http://olsenfashionnook.com/rowdresses[/URL]">Dresses</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/duFFudHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93cG39m']http://olsenfashionnook.com/rowpants[/URL]">Pants</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/bhVVhbnNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93am39m']http://olsenfashionnook.com/rowjeans[/URL]">Jeans</a></td>


<td style="width: 30%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/c8GG8cHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93d9mc']http://olsenfashionnook.com/rowtops[/URL]">Tops</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZMXXMZXNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93YmxvdxmY']http://olsenfashionnook.com/rowblouses[/URL]">Blouses</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/clRRlcnNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93c3dlYXld3']http://olsenfashionnook.com/rowsweaters[/URL]">Sweaters</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/ZulluZ3NodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93bGVnZ2nVG']http://olsenfashionnook.com/rowleggings[/URL]">Leggings</a></td>






<td style="width: 45%; padding-right: 71px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/dh99hdHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93Y239m']http://olsenfashionnook.com/rowcoats[/URL]">Coats</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/dU22UdHNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93amFjaFma']http://olsenfashionnook.com/rowjackets[/URL]">Jackets</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/cUmmUcnNodHRwOi8vb2xzZW5mYXNoaW9ubm9vay5jb20vcm93YmxhexmY']http://olsenfashionnook.com/rowblazers[/URL]">Blazers</a></td>


</tr>


<tr>






<td style="width: 100%; border-top: 1px solid black; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;" colspan="3"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/OQOOQOG5odHRwOi8vc2hyc2wuY29tLz9ozLt']http://shrsl.com/?h98n[/URL]" target="_blank" rel="noopener">Home Living Style – Home Furniture</a></td>


</tr>


<tr>






<td style="width: 100%; border-top: 1px solid black; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;" colspan="3"><a style="color: #00138e;" href="[URL='https://lumtu.com/yti/bj55jb21odHRwOi8vbm9va2ZyYWdyYW5jZSj5W']http://nookfragrance.com[/URL]" target="_blank" rel="noopener">Women's Fragrance Blog/Store</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/bwYYwb21odHRwOi8vdGhlbm90YWJsZW5vb2su2bv']http://thenotablenook.com[/URL]" target="_blank" rel="noopener">The Notable Nook/A General Forum</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/Zu55uZXRodHRwOi8vY2VsZWJyaXR5bm9vayv9m']http://celebritynook.net[/URL]" target="_blank" rel="noopener">Celebrity Pic Forum</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/bj55jb21odHRwOi8vbm9va21vdmllcHJldmlldyllm']http://www.nookmoviepreview.com[/URL]" target="_blank" rel="noopener">Movie Preview Site</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/Z4mm4ZXRodHRwOi8vbm9va3NlbGZpbXByb3ZlLZ3b']http://www.nookselfimprove.net[/URL]" target="_blank" rel="noopener">Self Improvement Blog</a><br/>


<a style="color: #00138e;" href="[URL='https://lumtu.com/yti/bj55jb21odHRwOi8vbWFuZGF0b3J5YmxvZ3NlbylN3']http://mandatoryblogseo.com[/URL]" target="">Mandatory Blog SEO</a>


</td>


</tr>


<tr>


<td style="padding-left: 7px; font-size: 12px; font-weight: bold; color: #808080;" colspan="3">


<iframe style="border: 2px solid #a8830a; border-radius: 10px;" src="http://www.dailymotion.com/embed/video/x52tafa" width="300" height="169" frameborder="0" allowfullscreen=""></iframe>


Mary Kate And Ashley Olsen<br/>


Two Of A Kind - First Crush<i> by <a href="[URL='https://lumtu.com/yti/czllzczFodHRwOi8vZGFpbHltb3Rpb24uY29tL2NvcmV5LXByZWyBX']http://www.dailymotion.com/corey-preiss1[/URL]" target="_blank" rel="noopener">corey-preiss1</a></i>


</td>


</tr>


</tbody>


</table>

Код (разметка):

Я только что открыл страницу в Chrome, и она выглядит так же, как в Firefox. Что следует учитывать: Различные браузеры более или менее агрессивно относятся к сжатию содержимого; элементы абсолютного положения, элементы таблицы, элементы встроенного блока, например.

Раньше это была серьезная проблема с IE и, в меньшей степени, с Chrome и Opera.

Я сейчас на пенсии, и ни на одной из моих машин с Linux больше нет IE или Opera.

🤷 В этом случае я ожидаю, что таблица переполнит контейнер, а не упадет вниз.

Раскрывающийся список заставляет меня задаться вопросом, изменили ли вы свойство отображения элементов th/td, скажем, на встроенный блок?

Еще одна мысль: происходит ли это раскрывающееся событие при всех размерах окон?

Гэри

единственный встроенный блок, который у меня есть, — это кнопки Facebook и «Пожертвовать» я ничего не говорил о раскрывающемся списке но ты говоришь, что с таблицами в твоем браузере все в порядке это работает для всех остальных
http://olsenfashionnook.com

Независимо от того, работает это или нет — это неправильный способ использования HTML — это не табличные данные, и их вообще не следует помещать в таблицы. Есть много лучших способов добиться того, чего вы хотите, и таблицы не входят в их число. Это списки, а не табличные данные.

Следовательно, он должен быть отформатирован как список, и если вы хотите, чтобы он хорошо переносился, вы можете использовать современные методы, такие как flex-box или аналогичные методы.

Но его не следует помещать в таблицы (также потому, что таблицы часто ведут себя странно, когда размеры экрана различаются, и могут быть непредсказуемыми).

Странный. Когда я запускаю его на jsfiddle в Chrome, с моей стороны он работает нормально: https://jsfiddle.net/0byke1b7/

У вас также есть внешний .css? Возможно, некоторые CSS-коды WordPress мешают работе вашего нового кода. Во-вторых, я бы попытался очистить файлы cookie в Chrome, чтобы посмотреть, имеют ли они какое-то отношение к этому (хотя я предполагаю, что вы уже это сделали).