Фон: линейный градиент с IE

Question

Я новичок в html и CSS.

Я делаю таблицу в css с диаграммами Google, и у меня есть код в VFP, который создает файл в HTMl с данными в SQL.

Я хочу в определенных ячейках, которые имеют более одного цвета фона, поэтому я использую этот код в определенной ячейке

Это работает в Firefox, Chrome и Edge, но с IE не работают.Что мне нужно вставить в код для работы с iE?

    data.setProperty(2, 10, "background-color", "linear-gradient(to bottom,rgb(231,111,81) 50%,rgb(233,196,106) 50%");
    data.setProperty(2, 10,"style", "background:linear-gradient(to bottom,rgb(231,111,81) 50%,rgb(233,196,106) 50%");

Answer 1

data.setProperty(2, 10, "background-color", "linear-gradient(to bottom,rgb(231,111,81) 50%,rgb(233,196,106) 50%");
data.setProperty(2, 10,"style", "background:linear-gradient(to bottom,rgb(231,111,81) 50%,rgb(233,196,106) 50%");

Проблема связана с приведенным выше кодом, он недействителен, свойство линейного градиента пропускает конечную метку (');'). Попробуйте изменить код, как показано ниже:

data.setProperty(2, 10, "background-color", "linear-gradient(to bottom,rgb(231,111,81) 50%,rgb(233,196,106) 50%);");
data.setProperty(2, 10, "style", "background: linear-gradient(to bottom,rgb(231,111,81) 50%, rgb(233,196,106) 50%);");

Кроме того, вы также можете использовать метод data.setCell (), чтобы добавить класс css для специальной ячейки. как это:

data.setCell(2, 1, 8000, '$8,000', { 'className': 'deeppink-border right-text customstyle' });

Стиль CSS:

.customstyle {
    background: linear-gradient(to bottom,rgb(231,111,81) 50%, rgb(233,196,106) 50%);
    background-color: linear-gradient(to bottom,rgb(231,111,81) 50%,rgb(233,196,106) 50%);
}

Answer 2

Вам нужен префикс для инструментов использования линейного градиента, таких как autoprefixer, для генерации необходимого css.

https://autoprefixer.github.io/

это не работает для IE, так как он довольно старый, вам нужно будет повторить градиент здесь.

https://colorzilla.com/gradient-editor/#e76f51+50,e9c46a+50

удалите комментарии, и у вас будет браузерный совместимый CSS-градиент, который работает практически везде.

background: #e76f51; /* Old browsers */
background: -moz-linear-gradient(top,  #e76f51 50%, #e9c46a 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e76f51 50%,#e9c46a 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e76f51 50%,#e9c46a 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e76f51', endColorstr='#e9c46a',GradientType=0 ); /* IE6-9 */