Основное содержание моей частной веб-страницы не отображается странно в Firefox. Верхний и нижний колонтитулы отображаются, а основной текст помещен рядом с ними вправо. Иногда нижний колонтитул также перемещается над основным текстом. Я предполагаю, что это одна из проблем, связанных с позиционированием DIVs, которые я как-то не хватает. [Это было решено]Знаки DIV ведут себя странно
Высота двух DIV, одинаково высока, когда отображается в Chrome, также отличается. Эта проблема также встречается в Safari, но по-другому. Между логотипом и навигационной панелью есть пробел в 1 px, если нет в Chrome или Firefox. Может ли кто-нибудь подумать о способе сброса всех настроек браузера, чтобы избежать подобных событий в будущем?
Веб-сайт в настоящее время еще не в сети, и я отлаживаю его для окончательного выпуска. (Я действительно не хочу выпускать это в текущем состоянии, так как это может помешать любому, кто не использует браузер веб-браузера.)
Кроме того, в качестве примечания, кто-либо знает, как исправить ошибки CSS, m получать в Internet Explorer 9? Градиент в навигационной панели пропал, в некоторых областях отсутствует цвет фона, и все ссылки на изображения имеют раздражающие прямоугольники вокруг них.
EDIT: Я видел в генераторе градиента CSS, что мне нужно сделать, чтобы градиенты работали в IE9. Исходная проблема, по-видимому, проистекает из того же источника.
Кроме того, кто-нибудь из Opera испытывает проблемы с последней версией отладки в http://jsbin.com/ipixay/1? (Кредит для этого отправляется в Sunyatasattva.)
Ссылка на скрипку (где размещен код): http://jsfiddle.net/aaQSD/7/ Пожалуйста, простите меня за количество CSS, которое все еще существует, но я не могу сказать, какие причины проблемы Internet Explorer 9.
Мое предположение, что проблема Firefox лежит где-то в этом разделе CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Вот список вещей, которые были исправлены:
- Нежелательные коробки/границы вокруг изображения
- Firefox проблема отображения
- Glitchy сноска
EDIT: В настоящее время я работаю над созданием скрипта с минимальным кодом, чтобы воспроизвести проблему, как это предлагается в комментариях. Надеюсь, ты сможешь простить меня за мою неудачную ошибку. Спасибо, всем, кто ответил до сих пор!
EDIT 2: скрипка отсутствует! Я удалил коробку кода pandora, которая была ниже.
ваш сайт в прямом эфире, так что мы могли посмотреть? – trajce
было бы проще включить скрипку/codepen :) –
просто добавить, вот ссылка [fiddle link] (http://jsfiddle.net/) – trajce