Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » кроссбраузерная верстка

Страниц (1): [1]
 

1. Perun - 29 Апреля, 2019 - 13:18:12 - перейти к сообщению
Верстал тестовый шаблон сайта, проверял на опере и хроме все нормально было и там и там. Пару дней назад переустанавил виндовс, поставил 10ку и обновил все браузеры. Сегодня проверял на опере, хроме, ФФ и ИЕ. На первых двух все отлично, на ФФ слегка съехали по непонятным причинам позиционирование картинок, перерыл все через инспектор кода, так и не понял в чем причина, а в ИЕ вообще все посыпалось, можно сказать верстка поехала болше чем на 50% в разных местах страничек. Т.е. это не одно-два-три свойства - помарки, а бОльшая часть разметки отображается некорректно. Я даже не знаю, что там можно переделать. Вопрос в том, это ИЕ в десятке такой "неправильный", или что-то нужно глобально изменять в разметке? Смущает большое количество неправильно отображаемых элементов разметки.Может хоть поблоково для шаблона(навигация, футер больше всего поехали) кто подскажет в чем проблема, и что с этим делать?

CODE (html):
скопировать код в буфер обмена
  1. <body>
  2. <div class="wrapper">
  3.     <!-- Заголовок  -->
  4.     <header>
  5.         <div class="mainheader">
  6.             <div class="logo">
  7.                 <a href="/"><img src="/img/logo.png"></a>
  8.             </div>
  9.             <nav>
  10.                 <ul>
  11.                     <li class="active"><a href="/index.php?page=home">home</a>
  12.                     <li ><a href="/index.php?page=far&module=far">far</a>
  13.                     <li class="arrow"><a href="/index.php?page=services">services
  14.                             <div class="arr-down"></div></a>
  15.                         <ul class="drop-menu">
  16.                             <li><a href="/index.php?page=services list">services list</a>
  17.                             <li class="service"><a href="/index.php?page=services overview">services overview<div class="right-arrow"></div></a>
  18.                                 <ul class="sub-drop-menu">
  19.                                     <li><a href="/index.php?page=steel work">steel work</a>
  20.                                     <li><a href="/index.php?page=project management">project management</a>
  21.                                     <li><a href="/index.php?page=oil & gas">oil & gas</a>
  22.                                    <li><a href="/index.php?page=havy machining">havy machining</a>
  23.                                </ul>
  24.                            <li><a href="/index.php?page=faqs">faqs</a>
  25.                            <li><a href="/index.php?page=archive">archive</a>
  26.                        </ul>
  27.                    <li><a href="/index.php?page=game&module=game">game</a>
  28.                    <li><a href="/index.php?page=gb&module=gb">GB</a>
  29.                    <li style = "display:<?php echo $visible;?>"><a href="/index.php?page=Admin">Admin</a>
  30.                 </ul>
  31.             </nav>
  32.             <div class="right">
  33.                 <div class="search">
  34.                     <input  type="text" name="text"><a href="#"><img src="/img/search_icon.png"></a>
  35.                 </div>
  36.             </div>
  37.         </div>
  38.         <div class="auth">
  39.             <div class="message">
  40.                 <?php if(isset($login_message)){echo $login_message;} ?>
  41.             </div>
  42.             <form class="login" method="post" action="">
  43.                 <div class="data">
  44.                     E-mail: <input type="email" name="email">
  45.                     Password: <input type="password" name="pass">
  46.                     Remember me: <input type="checkbox" name="save">
  47.                 </div>
  48.                 <div class="login-buttons">
  49.                     <input style = "display:<?php echo $login_visible;?>" class="login-button" type="submit" name="login" value="LOGIN">
  50.                     <input style = "display:<?php echo $logout_visible;?>" class="login-button" type="submit" name="logout" value="LOGOUT">
  51.                     <input style = "display:<?php echo $register_visible;?>" class="login-button" type="submit" name="reg" value="REGISTER">
  52.                 </div>
  53.             </form>
  54.         </div>
  55.  
  56.     </header>
  57.  
  58.     <main>
  59.         <?php include 'skins/default/'.$_GET['module'].'/'.$_GET['page'].'.tpl'; ?>
  60.     </main>
  61. </div>
  62. <footer class="clearfix">
  63.     <div class="privacy">
  64.         <p>360 Degree Industrial | © <?php echo $CY;?></p>
  65.         <a href="#">Privacy policy</a>
  66.     </div>
  67.     <div class="social">
  68.         <a class="first-social" href="#"></a>
  69.         <a class="second-social" href="#"></a>
  70.         <a class="third-social" href="#"></a>
  71.     </div>
  72.  
  73. </footer>
  74.  
  75. </body>


Главная:

CODE (html):
скопировать код в буфер обмена
  1.  
  2.  
  3. <div class="gallery">
  4.     <div class="table">
  5.         <div>
  6.             <img src="/img/photo1.jpg">
  7.             <img class="big" src="/img/photo2.jpg">
  8.             <img src="/img/photo3.jpg">
  9.         </div>
  10.         <div>
  11.             <img class="big" src="/img/photo4.jpg">
  12.             <img src="/img/photo5.jpg">
  13.             <img src="/img/photo6.jpg">
  14.         </div>
  15.     </div>
  16.     <div class="content-block  clearfix">
  17.         <div class="content">
  18.             <h3>OIL & GAS</h3>
  19.            <img src="/img/page1_img1.jpg">
  20.            <ul>
  21.                <li><a href="#">Lorem ipsum dolor sit ametns ectetuer adipiscing elit, sed diam nonummy.</a>
  22.                <li><a href="#">Lorem ipsum dolor sit ametns ectetuer adipiscing.</a>
  23.                <li><a href="#">Lorem ipsum dolor sit ametns ectetuer adipiscing.</a>
  24.            </ul>
  25.        </div>
  26.  
  27.        <div class="content">
  28.            <h3>WELDING</h3>
  29.            <img src="/img/page1_img2.jpg">
  30.            <ul>
  31.                <li><a href="#">Lorem ipsum dolor sit ametns ectetuer adipiscing elit, sed diam nonummy.</a>
  32.                <li><a href="#">Lorem ipsum dolor sit ametns ectetuer adipiscing.</a>
  33.                <li><a href="#">Lorem ipsum dolor sit ametns ectetuer adipiscing.</a>
  34.            </ul>
  35.        </div>
  36.  
  37.  
  38.        <div class="content">
  39.            <h3>QUARRYING</h3>
  40.            <img src="/img/page1_img3.jpg">
  41.            <ul>
  42.                <li><a href="#">Lorem ipsum dolor sit ametns ectetuer adipiscing elit, sed diam nonummy.</a>
  43.                <li><a href="#">Lorem ipsum dolor sit ametns ectetuer adipiscing.</a>
  44.                <li><a href="#">Lorem ipsum dolor sit ametns ectetuer adipiscing.</a>
  45.            </ul>
  46.        </div>
  47.  
  48.        <div class="content">
  49.            <h3>QUARRYING</h3>
  50.            <ul class="last-content">
  51.                <li><a href="#">Maintenance</a>
  52.                <li><a href="#">Vibration measurement</a>
  53.                <li><a href="#">Thermography</a>
  54.                <li><a href="#">Balancing service</a>
  55.                <li><a href="#">Alignment service</a>
  56.                <li><a href="#">Video endoscopy</a>
  57.                <li><a href="#">Technical Services</a>
  58.                <li><a href="#">Welding</a>
  59.                <li><a href="#">Mining</a>
  60.            </ul>
  61.        </div>
  62.    </div>
  63. </div>
  64. <div class="bottom">
  65.    <div class="bottom-header clearfix">
  66.        <h3>recent projects</h3>
  67.        <div class="nav-arrows">
  68.            <a class="arrow-left" href="#"></a>
  69.            <a class="arrow-right" href="#"></a>
  70.        </div>
  71.    </div>
  72.    <div class="bottom-content">
  73.        <div>
  74.            <img src="/img/page1_img4.jpg">
  75.            <a href="#">Lorem ipsum dolor sit ametns ectetuer</a>
  76.            <p>April, 2016</p>
  77.        </div>
  78.        <div>
  79.            <img src="/img/page1_img5.jpg">
  80.            <a href="#">Lorem ipsum dolor sit ametns ectetuer</a>
  81.            <p>April, 2016</p>
  82.        </div>
  83.        <div>
  84.            <img src="/img/page1_img6.jpg">
  85.            <a href="#">Lorem ipsum dolor sit ametns ectetuer</a>
  86.            <p>April, 2016</p>
  87.        </div>
  88.        <div>
  89.            <img src="/img/page1_img7.jpg">
  90.            <a href="#">Lorem ipsum dolor sit ametns ectetuer</a>
  91.            <p>April, 2016</p>
  92.        </div>
  93.    </div>
  94. </div>


CODE (html):
скопировать код в буфер обмена
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. @import url('https://fonts.googleapis.com/css?family=Contrail+One');
  5. @import url('https://fonts.googleapis.com/css?family=Titillium+Web');
  6. *{
  7.     padding:0;
  8.     margin:0;
  9. }
  10. h2{
  11.     text-align:center;
  12. }
  13. html{
  14.     background:url(/img/bg_body.png) repeat;
  15. }
  16. body{
  17.     background-color:white;
  18.     width:1040px;
  19.  
  20.     margin:0 auto;
  21.     box-shadow: 0 0 5px #d9d8d8;
  22. }
  23. main{
  24.     margin-top:30px;
  25. }
  26. a,p{
  27.     text-decoration:none;
  28.     font: 12px/21px Arial;
  29.     font-weight: bold;
  30.     color: #2c2f32;
  31. }
  32. li{
  33.     list-style:none;
  34. }
  35. .clearfix::after{
  36.     content:"";
  37.     clear:both;
  38.     display:block;
  39. }
  40. .mainheader{
  41.     width:940px;
  42.     display:table;
  43.  
  44.     margin:0 auto;
  45.     padding-bottom:40px;
  46. }
  47. .logo, nav, .right{
  48.     display:table-cell;
  49.     vertical-align:bottom;
  50. }
  51. .logo{
  52.     width:230px;
  53. }
  54. nav {
  55.     text-align:center;
  56. }
  57. nav li{
  58.     display:inline-block;
  59.     position:relative;
  60. }
  61. nav a{
  62.     display:inline-block;
  63.     font-family: 'Titillium Web', sans-serif;
  64.     font-size: 14px;
  65.     line-height: 18px;
  66.     text-transform: uppercase;
  67.     padding: 85px 15px 17px;
  68. }
  69. .active, nav a:hover, .arrow:hover{
  70.     background-color:#c0decb;
  71. }
  72. .service:hover{
  73.       background-color:#f0f0f0;
  74. }
  75. .active a, nav a:hover, .arrow:hover >a{
  76.     color:white;
  77. }
  78. .arr-down{
  79.     background: url(/img/arrows.png) 0 -3px no-repeat;
  80.     min-height: 4px;
  81.     width: 5px;
  82.     margin: 1px auto -7px;
  83. }
  84. .arrow:hover .arr-down{
  85.     background-position: 0 1px;
  86. }
  87. .arrow:hover .drop-menu,.service:hover .sub-drop-menu{
  88.     display:block;
  89. }
  90. .drop-menu, .sub-drop-menu{
  91.     width: 190px;
  92.     position: absolute;
  93.     background: #fafafa;
  94. }
  95. .drop-menu {
  96.     display:none;
  97.     text-align:left;
  98. }
  99. .drop-menu li{
  100.     display:block;
  101.     border-top: 1px solid #f3f3f3;
  102. }
  103. .drop-menu a{
  104.     display: block;
  105.     padding: 11px 0 10px 20px;
  106. }
  107. .drop-menu a:hover{
  108.     background-color:#f0f0f0;
  109.     color: #2c2f32;
  110. }
  111. .right-arrow{
  112.     display:inline-block;
  113.     background: url(/img/arrows.png) -8px 0 no-repeat;
  114.     height: 5px;
  115.     width: 4px;
  116.     vertical-align: middle;
  117.     margin-left: 2px;
  118. }
  119. .sub-drop-menu{
  120.     display:none;
  121.     top:-1px;
  122.     left:191px;
  123. }
  124. .right{
  125.     text-align:right;
  126.     width:260px;
  127. }
  128. .search{
  129.     border:1px solid #f0f0f0;
  130.     width:100%;
  131.     min-height:49px;
  132. }
  133. .search a{
  134.     width:51px;
  135.     min-height:49px;
  136.     line-height:49px;
  137.     display:inline-block;
  138.     vertical-align:middle;
  139.     text-align:center;
  140. }
  141. .search img{
  142.     vertical-align: middle;
  143. }
  144. .search a:hover{
  145.     background-color:#f0f0f0;
  146. }
  147. input{
  148.     border:none;
  149.     padding-left:5px;
  150.     padding-right:5px;
  151.     display:inline-block;
  152.     text-align:left;
  153.     vertical-align:middle;
  154. }
  155. .inp{
  156.  
  157. }
  158. img{
  159.     vertical-align:bottom;
  160. }
  161. .auth{
  162.  
  163.  
  164.     font-size: 14px;
  165.     text-align:center;
  166.     margin: 0 auto 20px;
  167.     width: 940px;
  168.     font-family: 'Titillium Web', sans-serif;
  169.  
  170. }
  171. .login > div{
  172.     display:table-cell;
  173. }
  174.  
  175. .login{
  176.     width:100%;
  177.     display:table;
  178. }
  179. .login-buttons{
  180.     text-align:right;
  181.  
  182. }
  183. .message{
  184.     padding:10px 0 20px;
  185.     font-weight: bold;
  186.     color: #2c2f32;
  187.     text-transform:uppercase;
  188.     font-size: 12px;
  189. }
  190. .data{
  191.     text-align:left;
  192. }
  193. .login-button{
  194.     background-color:#c0decb;
  195.     color:white;
  196.  
  197. }
  198. .login input{
  199.     border: 1px solid #f0f0f0;
  200.     line-height:21px;
  201.     font-size: 14px;
  202.  
  203. }
  204. .table{
  205.     display:table;
  206.     margin:0 auto;
  207.     width:942px;
  208. }
  209. .table div{
  210.     display:table-row;
  211. }
  212. .table img{
  213.     display:inline-block;
  214.     margin: 1px 0 0 1px;
  215. }
  216. .content-block{
  217.     width:960px;
  218.     margin:20px auto;
  219. }
  220. .content{
  221.     text-align: left;
  222.     float: left;
  223.     width: 220px;
  224.     margin: 0 10px 30px;
  225. }
  226. h3{
  227.     font-family: 'Titillium Web', sans-serif;
  228.     font-size: 30px;
  229.     line-height: 36px;
  230.     font-weight: bold;
  231.     text-transform: uppercase;
  232.     text-align: left;
  233.     margin-top: 20px;
  234. }
  235. .content img{
  236.     margin-top:30px;
  237. }
  238. .content li{
  239.     background: url(/img/marker.png) 0 29px no-repeat;
  240.     padding: 20px 0 20px 15px;
  241. }
  242. .last-content{
  243.     color: #a7cbb4;
  244.     margin-top:15px;
  245. }
  246. .last-content li{
  247.     background: url(/img/marker.png) 0 19px no-repeat;
  248.     padding: 11px 0 12px 15px;
  249. }
  250. .last-content li a{
  251.     color: #a7cbb4;
  252. }
  253. .content li:nth-child(n+2){
  254.     border-top:1px solid #ebede5;
  255. }
  256. .bottom{
  257.     background:url(/img/bg_body.png) repeat;
  258.    
  259. }
  260. .bottom-header{
  261.     width:960px;
  262.     margin:20px auto;
  263. }
  264. .bottom-header h3{
  265.     float:left;
  266. }
  267. .nav-arrows{
  268.     float:right;
  269.     margin-top: 20px;
  270.     font-size: 0;
  271. }
  272. .nav-arrows a{
  273.     display:inline-block;
  274.     width: 30px;
  275.     min-height: 34px;
  276. }
  277. .arrow-left{
  278.     background: url(/img/prevnext.png) 0 1px no-repeat;
  279. }
  280. .arrow-right{
  281.     background: url(/img/prevnext.png) -30px 1px no-repeat;
  282. }
  283. .arrow-left:hover {
  284.     background-position: 0 -33px;
  285. }
  286. .arrow-right:hover {
  287.     background-position: -30px -33px;
  288. }
  289. .bottom-content{
  290.     display:table;
  291.     width:960px;
  292.     margin:10px auto 0;
  293.     padding-bottom:50px;
  294.     color: #539d8b;
  295.     font-weight: normal;
  296. }
  297. .bottom-content div{
  298.     display:table-cell;
  299.     position:relative;
  300.     padding-right:20px;
  301. }
  302. .bottom-content img{
  303.     float:left;
  304.     margin-right:20px;
  305. }
  306. .bottom-content p{
  307.     position:absolute;
  308.     bottom:-5px;
  309.     left:110px;
  310.     color: #539d8b;
  311.     font-weight: normal;
  312. }
  313. footer{
  314.     color: #c0decb;
  315.     width:960px;
  316.     margin:0 auto;
  317.     padding:50px 0 50px 0;
  318. }
  319. footer p, footer a{
  320.     display:inline-block;
  321.     color: #c0decb;
  322. }
  323. .content a:hover, .bottom-content a:hover{
  324.     color: #c0decb;
  325. }
  326. .privacy{
  327.     float:left;
  328. }
  329. .privacy a:hover,.last-content li a:hover{
  330.     color: #2c2f32;
  331. }
  332. .social{
  333.     float:right;
  334. }
  335. .social a{
  336.     width:24px;
  337.     min-height:24px;
  338.     background:url(/img/socials.png);
  339.     margin-left:10px;
  340. }
  341. .social .first-social{
  342.     background-position:0 0;
  343. }
  344. .social .second-social{
  345.     background-position:-34px 0;
  346. }
  347. .social .third-social{
  348.     background-position:-68px 0;
  349. }
  350. .social a:hover{
  351.     opacity:0.5;
  352. }
  353. .wrapper{
  354.     min-height: calc(100vh - 128px);
  355. }
2. Vladimir Kheifets - 30 Апреля, 2019 - 09:41:16 - перейти к сообщению
Perun пишет:
Верстал тестовый шаблон сайта, проверял на опере и хроме все нормально было и там и там. Пару дней назад переустанавил виндовс, поставил 10ку и обновил все браузеры. Сегодня проверял на опере, хроме, ФФ и ИЕ. На первых двух все отлично, на ФФ слегка съехали по непонятным причинам позиционирование картинок, перерыл все через инспектор кода, так и не понял в чем причина, а в ИЕ вообще все посыпалось, можно сказать верстка поехала болше чем на 50% в разных местах страничек. Т.е. это не одно-два-три свойства - помарки, а бОльшая часть разметки отображается некорректно. Я даже не знаю, что там можно переделать. Вопрос в том, это ИЕ в десятке такой "неправильный", или что-то нужно глобально изменять в разметке? Смущает большое количество неправильно отображаемых элементов разметки.Может хоть поблоково для шаблона(навигация, футер больше всего поехали) кто подскажет в чем проблема, и что с этим делать?

Добрый день!
Если Вы сравните USER AGENT Edge и IE, то поймёте, в чём проблема.
Спойлер (Отобразить)
Для некоторых свойств, которые отрабатываются в браузерах по разному, предусмотрены вендорные префиксы:
Спойлер (Отобразить)
Вендорные префиксы, с Edge не помогают (см. USER AGENT)
Если у Вас есть возможности изменять шаблон, то для задания стилей для Edge попробуйте использовать правило @supports
Например:
CODE (html):
скопировать код в буфер обмена
  1. @supports (-ms-ime-align:auto) {
  2.  .W530{
  3.         margin:10 10 0 10;
  4.  }
  5. }  
Удачи!
3. Perun - 30 Апреля, 2019 - 09:58:09 - перейти к сообщению
Vladimir Kheifets пишет:
Если Вы сравните USER AGENT Edge и IE,

Не эти, а скорее IE 11 с помледними актуальными на сегодня хромом, оперой, ФФ. Но суть Вашего сообщения понятна. Вендорные префиксы,@supports не изучал еще.

В целом - спасибо большое за участие в вопросе, хоть кто-то отозвался.
4. Vladimir Kheifets - 30 Апреля, 2019 - 10:21:53 - перейти к сообщению
Perun пишет:
Vladimir Kheifets пишет:
Если Вы сравните USER AGENT Edge и IE,

Не эти, а скорее IE 11 с помледними актуальными на сегодня хромом, оперой, ФФ. Но суть Вашего сообщения понятна. Вендорные префиксы,@supports не изучал еще.
В целом - спасибо большое за участие в вопросе, хоть кто-то отозвался.

Если коротко, то что написано в @supports(условие){....} применяется только в том случае, если "условие" выпоняется.
В данном, случае проверяется отрабатывет ли браузер некоторое CSS-свойсто, которое работает только в Edge.
Вам нужно найти классы которые не верно отрабатываются в Edge и добавить @supports
Например:
CODE (html):
скопировать код в буфер обмена
  1.     .W530{
  2.             margin:10 10 0 10; /*all browsers*/
  3.     }
  4.     @supports (-ms-ime-align:auto) {
  5.      .W530{
  6.             margin:5 5 0 5;  /*only browser Edge*/
  7.      }
  8.     }  
  9.  
5. Perun - 30 Апреля, 2019 - 10:26:52 - перейти к сообщению
Vladimir Kheifets пишет:
нужно найти классы которые не верно отрабатываются в Edge

Я в Edge даже не пробовал еще. Только IE, FF, Opera, Chrome. Глобально пhоблема пока что только с IE
6. Perun - 30 Апреля, 2019 - 18:10:07 - перейти к сообщению
Странная штука... Залил частично сайт на хостинг и то, что сыпалось на локальном сервере, на хостинге отображается нормально во всех браузерах...
7. Vladimir Kheifets - 02 Мая, 2019 - 15:37:29 - перейти к сообщению
Perun пишет:
Странная штука... Залил частично сайт на хостинг и то, что сыпалось на локальном сервере, на хостинге отображается нормально во всех браузерах...

Браузеры, где были раньше, там и остались.
Может быть, какой-то <link href="..." rel="stylesheet" type="text/css" />
потерялся на локальном сервере и нашёлся на хостинге.
Попробуйте проверить в консоле все ли классы определены.
8. LIME - 02 Мая, 2019 - 16:01:48 - перейти к сообщению
В консоль смотрел вообще?
В сети что-то не прилетело небось
(Добавление)
https://learn[dot]javascript[dot]ru/devtools

 

Powered by ExBB FM 1.0 RC1