Как сделать таблицу HTML одинаковой для браузеров?

-1

Я просто понял, что таблицы не отображаются одинаково в браузерах.Как сделать таблицу HTML одинаковой для браузеров?

Давайте посмотрим на этот пример http://files.fina-indo.com/html-tests/tabletest.html и откройте его в Firefox и Google Chrome. Он будет отлично смотреться в Firefox, но нечетным в Google Chrome.

Есть ли способ сделать это одинаково? Использует решетки DIV - единственное решение для этой проблемы?

Примечание: Я спрашиваю об этом, потому что мой пользователь Joomla является непрофессионалом, и он ничего не знает о HTML и CSS (он знает только о размещении содержимого). Редактор WYSIWYG внутри Joomla не имеет простого способа создать сетки DIV (сетки Twitter-бутстрапа). Если делать таблицы одинаково не одинаково, есть ли плагины TinyMCE или другой редактор WYSIWYG, который может это сделать?

Вот HTML я использую:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
    Remove this if you use the .htaccess --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

    <title>HTML</title> 
    <meta name="description" content="" /> 
    <meta name="author" content="Erwin" /> 

    <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> 
    <link rel="shortcut icon" href="/favicon.ico" /> 
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> 
    <link rel="stylesheet" href="../gamma/templates/shaper_helix_ii/css/bootstrap.min.css" type="text/css" /> 
    <link rel="stylesheet" href="css/normalize.css" type="text/css" /> 

    <style type="text/css"> 
     .container { 
     width: 940px 
     } 
    </style> 
    </head> 

    <body> 
    <div> 
     <header> 
     <h1>HTML</h1> 
     </header> 
     <nav> 
     <p> 
      <a href="/">Home</a> 
     </p> 
     <p> 
      <a href="/contact">Contact</a> 
     </p> 
     </nav> 

     <div> 
     <table border="0"> 
      <tbody> 
      <tr> 
       <td></td> 
       <td></td> 
       <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_LanSchool.png" alt="" /></td> 
       <td></td> 
       <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_ROO.png" alt="" /></td> 
       <td></td> 
       <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_Microsoft.png" alt="" /></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_Eduvision.png" alt="" /></td> 
       <td></td> 
       <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_KNT_Interactive.png" alt="" /></td> 
       <td></td> 
       <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_Educo.png" alt="" /></td> 
       <td></td> 
       <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_MiracleEdu.png" alt="" /></td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 

     <footer> 
     <p> 
      &copy; Copyright by Erwin 
     </p> 
     </footer> 
    </div> 
    </body> 
</html>

Firefox скриншот

Chrome Скриншот

источник

2013-09-19 strike_noir

Вы должны разместить свой HTML и CSS здесь –

Это был мой html и css. Я думал, что положить в сеть проще, потому что люди могут посмотреть, как это проявляется в их браузерах. –

Можете ли вы хотя бы добавить скриншоты, чтобы показать * как * его не показывать то же самое? –

Не используйте таблицы для макета, они предназначены для табличных данных, а не для представления.

Чтобы удовлетворить людей, которые говорят, что это не ответ, если у вас есть часть HTML-кода, использующая пустую строку с 15 пустым ячеек для правильного отображения изображений, источник HTML необходимо переосмыслить. Единственное решение для этого:

 <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr>

Снова начать и переписать.

источник

2013-09-20 00:40:14

Да, я знаю. Фактически я сам использую загрузочные сетки для макета: D Но эта проблема была адресована для тех Javascript WYSIWYG редакторов (TinyMCE), которые используются Joomla.Если только я могу заставить непрофессионала (моего клиента) узнать некоторые css и html, мне может не потребоваться спросить об этом: '( –

Не ответ на вопрос. –

@ JukkaK.Korpela Иногда лучший ответ на вопрос, isn «Ответ на вопрос, который ожидал». [См. также XY Problem] (http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) –

Вы можете попробовать использовать что-то вроде normalize.css, чтобы получить таблицы (и другие элементы) похожий на браузер.

источник

2013-09-19 23:59:28 kibibu

Я пересмотрел html и css. Добавлен normalize.css в него, но, похоже, таблицы действительно имеют свои правила рендеринга. Все еще делает по-разному. –

Вы можете проверить, связана ли проблема с вашим css, добавив * {padding: 0px; margin: 0px;} в ваш файл css на самом верху он удалит ВСЕ прокладки и поля на каждой вещи.

Хотя это испортит ваш css, он должен сделать таблицы одинаковыми во всех браузерах.

Как только вы установили, что это действительно связано с css, google для браузера CSS-браузера перезагрузите и выполните его. Он попытается сбросить все нестандартные параметры независимого браузера css

источник

2013-09-20 00:34:56 FlemGrem

Как сделать таблицу HTML одинаковой для браузеров?

ответ

Смежные вопросы