CSS не работает в Chrome, но работает в Firefox

ProgramBox

CSS не работает в Chrome, но работает в Firefox

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#html #css #google-chrome #responsive-design #gradient

#HTML #css #google-chrome #адаптивный дизайн #градиент

Вопрос:

У меня есть фрагмент CSS-кода, который отлично работает в Firefox, но не в Chrome. Я предполагаю, что допустил ошибку при использовании -webkit-linear-gradient , которая показывает недопустимое значение в chrome

HTML-код:

 <div class="laptop">
    <div class="glare-xl"></div>
    <div class="screen-xl">
        <img src="http://www.psdgraphics.com/file/silver-laptop-icon.jpg" alt="laptop" />  
    </div>
    <div class="base-xl"></div>
    <div class="addons-xl "></div>
    <div class="button-xl"></div>
</div>

Код CSS:

 .laptop:before {
    background: none repeat scroll 0 0 padding-box #d3d4d6;
    border-color: #cecece #b7b7b9 #5e5d62;
    border-radius: 12px 12px 0 0;
    border-style: solid;
    border-width: 1px;
    bottom: 0;
    content: "";
    height: 317px;
    left: 0;
    margin-bottom: -1px;
    margin-left: -6px;
    margin-top: -6px;
    position: absolute;
    top: 0;
    width: 536px;
    z-index: -3;
}
.laptop:after {
    background: none repeat scroll 0 0 padding-box #000000;
    border: 1px solid #bdbec0;
    border-radius: 10px 10px 0 0;
    bottom: 0;
    content: "";
    height: 311px;
    left: 1px;
    margin-bottom: -1px;
    margin-left: -5px;
    margin-top: -6px;
    position: absolute;
    top: 2px;
    width: 532px;
    z-index: -2;
}
.laptop {
    background: none repeat scroll 0 0 padding-box #010101;
    border: 1px solid #101113;
    border-radius: 8px 8px 0 0;
    display: inline-block;
    height: 230px;
    margin-bottom: 40px;
    margin-left: 60px;
    position: relative;
    width: 528px;
}



.glare-xl {
    background-clip: padding-box;
    background-image: -moz-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
    background-image: -webkit-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
    background-image: -ms-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
    background-image: -o-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
    background-image: linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
    border-radius: 7px 7px 0 0;
    height: 308px;
    position: absolute;
    top: -1px;
    width: 610px;
    z-index: 100;
}



.screen-xl:before {
    background: -moz-linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -ms-linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -o-linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    border-color: #000000;
    border-radius: 7px 7px 0 0;
    border-style: solid;
    border-width: 9px 7px;
    content: "";
    height: 272px;
    left: -6px;
    position: absolute;
    top: -5px;
    width: 500px;
    z-index: 3;
}
.screen-xl:after {
    background: -moz-linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -ms-linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -o-linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    border: 1px solid #404040;
    border-radius: 25px;
    box-shadow: 0 0 2px #ffffff;
    content: "";
    height: 3px;
    left: 49%;
    position: absolute;
    top: -8px;
    width: 3px;
    z-index: 130;
}
.screen-xl {
    border: 1px solid #141414;
    border-radius: 2px 2px 0 0;
    height: 276px;
    left: 10px;
    position: absolute;
    top: 12px;
    width: 502px;
}

.screen-xl img {
    border-radius: 2px;
    height: 272px;
    left: 0;
    margin-left: 1px;
    margin-top: 4px;
    position: absolute;
    width: 500px;
    z-index: 100;
}

.base-xl:before {
    background: -moz-linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -ms-linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -o-linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    border-radius: 0 0 400px 400px / 0 0 100px 100px;
    bottom: -15px;
    box-shadow: 7px 0 3px #6a6d71 inset, -7px 0 3px #6a6d71 inset;
    content: "";
    height: 15px;
    left: -1px;
    position: absolute;
    width: 655px;
    z-index: 130;
}
.base-xl {
    background: -moz-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -ms-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -o-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    border-color: #6b6e72;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 1px 1px 0;
    bottom: -101px;
    box-shadow: 0 1px 2px #ffffff inset;
    float: left;
    height: 22px;
    left: -125px;
    margin-left: 60px;
    position: absolute;
    width: 654px;
    z-index: 4;
}

.addons-xl:before {
    background-color: #000000;
    border-radius: 55px 55px 5px 5px;
    bottom: -115px;
    content: "";
    height: 5px;
    left: 4%;
    position: absolute;
    width: 5px;
    z-index: 1000;
}
.addons-xl:after {
    background-color: #000000;
    border-radius: 55px 55px 5px 5px;
    bottom: -115px;
    content: "";
    height: 5px;
    position: absolute;
    right: 4%;
    width: 5px;
    z-index: 1000;
}
.addons-xl {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    height: 3px;
    margin-left: 53%;
    margin-top: 5px;
    width: 3px;
    z-index: 1000;
}


.button-xl:after {
    background: -moz-linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -ms-linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -o-linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    border-radius: 10px;
    bottom: -6px;
    box-shadow: 0 0 1px #ffffff;
    content: "";
    height: 3px;
    left: 274px;
    position: absolute;
    width: 20px;
    z-index: 4;
}
.button-xl {
    background: -moz-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -ms-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: -o-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    background: linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    border-color: #5c6064;
    border-radius: 0 0 50px 50px;
    border-style: solid;
    border-width: 0 1px 1px;
    bottom: -87px;
    box-shadow: 0 1px 5px #ffffff, 0 1px 1px #ffffff inset;
    content: "";
    height: 6px;
    left: 44%;
    position: absolute;
    width: 60px;
    z-index: 4;
}

Вопросы:

1) Почему CSS не работает в Chrome

2) Как я могу сделать всю эту структуру, то есть ноутбук, такой же отзывчивой, поскольку я пробовал максимальную ширину во всех местах, но это не работает?

JS FIDDLE

1. можете ли вы показать, как вы связываете свой CSS?

2. что именно не работает?

3. Я запускаю это в JS FIDDLE, и я тоже пробовал это в обычном файле в теге <style>

4. Попробуйте этот фон: -webkit-linear-gradient (слева, #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%); }

5. Очевидно, что отладчик в Chrome выдает «Недопустимое значение свойства», поэтому вы делаете что-то, что Chrome не поддерживает.

Ответ №1:

Вам нужно удалить / заменить center ключевое слово в linear-gradient() функции. Согласно спецификациям CSS3, такого понятия не существует.