-2
Я создал кнопку. Кнопка содержит значок и некоторый текст.Ошибка Css в Internet Explorer 11
Кнопка имеет следующие характеристики:
- Простота внедрения
- Если текст больше он переключается на две строки макета
- легко изменить цвет и размеры и положение значка
Мне это дорого, но теперь я закончил.
Хотя делать некоторые тесты я считаю, что кнопка не работает в IE 11.
Я пробовал много изменений, но ничего не помогло.
Если вы запустили это в IE, на кнопке 1 нет текста, а на кнопке два нет.
Если вы запустили его в Chrome, FireFox, Safari и Opera, все работает нормально.
/* CSS Document */
/*-----------------------Basic Styles---------------------------------*/
/*outer container, contains all parts*/
.btn {
border: 0px;
outline: 0;
outline-style:none;
background: none;
padding: 0;
margin: 0px;
height: 38px;
border-radius: 3px;
font-family: 'PT Sans',sans-serif;
font-size: 16px;
text-decoration: none;
text-align: center;
line-height: 100%;
text-align: center;
}
/*Required for center all the Content, surrounds the Text and the Icon*/
div.btn_innercontainer{
\t max-width: 95%;
\t margin-left: auto;
\t margin-right: auto;
\t display: inline-block;
\t width: auto; /* default value */
}
/*Cointains the Text*/
div.btn_text {
box-sizing: border-box;
width: auto;
max-width: 95%;
float: left;
height: 36px;
text-align: center;
padding-right: 2px;
padding-left: 4px;
text-align: center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
height: 36px;
}
/*Contains the Icon*/
div.btn_icon {
box-sizing: border-box;
width: 20px;
height: 20px;
margin-top: 11px;
text-align: center;
float: left;
font-size: 16px;
padding-left: 6px;
}
/*-------------------------------------Customising options---------------------------------------*/
/*Small Button version*/
.btn_small {
\t width: 131px;
}
/*Big Button version*/
.btn_big{
\t width:240px;
}
/*Orange Gradient Button*/
.btn_orange {
\t border: 1px solid #cd8102;
color: black;
text-shadow:1px 1px #fbd180;
background: -moz-linear-gradient(top, #ffd800 20%, #ff9d00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#ffd800), color-stop(100%,#ff9d00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffd800 20%,#ff9d00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffd800 20%,#ff9d00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffd800 20%,#ff9d00 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffd800 20%,#ff9d00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd800', endColorstr='#ff9d00',GradientType=0); /* IE6-9 */
background-size: auto 150%;
background-position: 0 100%;
transition: background-position 0.5s;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
}
.btn_orange:hover {
\t background-position: 0 0;
}
.btn_orange:active {
\t border: 1px solid #FFF;
}
/*Green Gradient Button*/
.btn_green {
\t border:1px solid #78b610;
\t color: white;
\t text-shadow:-1px -1px #3E6101;
\t background: -moz-linear-gradient(top, #81c510 0%, #577e15 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81c510), color-stop(100%,#577e15)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #81c510 0%,#577e15 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #81c510 0%,#577e15 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #81c510 0%,#577e15 100%); /* IE10+ */
background: linear-gradient(to bottom, #81c510 0%,#577e15 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81c510', endColorstr='#577e15',GradientType=0); /* IE6-9 */
\t background-size: auto 150%;
background-position: 0 100%;
transition: background-position 0.5s;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
}
.btn_green:hover {
\t background-position: 0 0;
}
.btn_green:active {
\t border: 1px solid #666666;
}
/*Grey Gradient Button*/
.btn_grey {
\t border:1px solid #818181;
\t color:#FFF;
text-shadow: -1px -1px #555555;
\t background: -moz-linear-gradient(top, #bfbfbf 0%, #575757 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfbfbf), color-stop(100%,#575757)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bfbfbf 0%,#575757 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bfbfbf 0%,#575757 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bfbfbf 0%,#575757 100%); /* IE10+ */
background: linear-gradient(to bottom, #bfbfbf 0%,#575757 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfbfbf', endColorstr='#575757',GradientType=0); /* IE6-9 */
background-size: auto 150%;
background-position: 0 100%;
transition: background-position 0.5s;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
}
.btn_grey:hover {
\t background-position: 0 0;
}
.btn_grey:active {
\t border: 1px solid #F0F0F0;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
\t <head>
\t \t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\t \t <title>Button Concept</title>
\t \t <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
\t \t <link rel="stylesheet" href="css/font-awesome.css">
\t \t <link rel="stylesheet" href="css/style.css">
\t </head>
\t <body>
\t \t
<!--Button with Icon on the LEFT side -->
\t <button type="submit" value="« %%BTBack%%" name="~BT-Addr_Back~" class="btn btn_small btn_green " >
\t \t <div class="btn_innercontainer"> \t
\t \t \t <div class="btn_icon">$</div>
\t \t \t <div class="btn_text">Preferences</div>
\t \t \t <div style="clear:both;"></div>
\t \t </div>
\t </button>
<!--Button with Icon on the Right side -->
\t <button type="submit" value="« %%BTBack%%" name="~BT-Addr_Back~" class="btn btn_big btn_orange " >
\t \t <div class="btn_innercontainer"> \t
\t \t \t <div class="btn_text">Preferences</div>
\t \t \t <div class="btn_icon">#</div>
\t \t \t <div style="clear:both;"></div>
\t \t </div>
\t </button>
\t </body>
</html>Пожалуйста, помогите мне.
Спасибо!
Обратите внимание, что в Stack Snippet ваши DOCTYPE и головные элементы не работают, как вы можете ожидать, все, что есть в вашем вопросе есть * внутри 'body' из сниппета фрейма *.Не уверен, влияет ли это на вашу демоверсию, но с учетом симптомов, которые она может оказать *. – Jeroen
Да, но такой же результат. Работает в каждом браузере, кроме IE. – m4xx