CSS-граница в Chrome: странная серая линия - PullRequest
Новая
       7

CSS-граница в Chrome: странная серая линия

0 голосов
/ 23 октября 2018

У меня проблема с рамкой в ​​Chrome.Зеленая граница имеет несколько серых линий.Firefox: не видно -> хорошо!Chrome: не виден, но виден в инструментах разработчика, мобильный телефон.Chrome на моем телефоне: видимый

Вот скриншот, который показывает мои проблемы!https://abload.de/img/cssiee7s.jpg

1) При переходе к http://www.seelenpuls.at/hpneu/m_biografie_leander_de.php есть две маленькие серые линии

2) При переходе к http://www.seelenpuls.at/hpneu/m_neues_de.php возникают еще больше проблем.

3) Кнопка меню имеет оранжевую рамку (только для мобильных устройств) ... и я не знаю почему, поскольку в моем CSS такого цвета нет.

Пожалуйста, помогите!

Вот код.Жирная часть - это граница, которая вызывает проблемы. 

* { padding: 0; margin: 0; }

body
{
font-family: sans-serif, Verdana, Arial;
color: #000000;
background-color: #556B2F;
}

#center {
position: relative;
width: 350px;
height: 630px;
box-sizing: border-box;
margin: 5px auto 0px auto;
}

#logo {

position: absolute;
width: 350px;
height: 220px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 350px 220px;
}

#navi
{
position: absolute;
top: 175px;
width: 60px;
height: 40px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;
}

#header
{
position: absolute;
top: 187px;
width: 238px;
height: 30px;
font-size: 16px;
color: #000000;
left: 85px;
}

#content
{
position: absolute;
top: 218px;
width: 350px;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
**border-bottom: 5px solid #556B2F**;
}

1 Ответ

0 голосов
/ 23 октября 2018

Хорошо, в вашем css происходит несколько вещей.

  1. Белые линии

Для вашего содержимого div теперь я бы использовал ширину 100% для мобильных устройств, поскольку при масштабировании до планшетов и настольных компьютеров вы можете перейти наболее фиксированная или жидкая ширина.Я бы также удалил свойство нижней границы.Это не полностью распространяется на ширину поля содержимого, и я не уверен, имеет ли это отношение к используемому вами свойству определения размера границы.Я бы также применил определение размеров границ таким образом, чтобы оно применялось к каждому элементу в вашем html 

* {
  box-sizing: border-box;
}

Оранжевая рамка - это вызвано свойством псевдо-css: focus используемой кнопки, вы можете удалить ее следующим образом

button: focus {outline: none;}

CSS Normalize или CSS Reset - рассмотрите возможность использования одной из этих таблиц стилей на своем веб-сайте.Они помогают вам отображать все элементы более согласованно во всех браузерах.Это сэкономит вам время на удаление свойства: focus, как я упоминал выше в любом проекте, продвигающемся вперед.Самые популярные CSS-фреймворки используют это для нормализации основных стилей.

Ссылка на файл Normalize.css

...