gpt4 book ai didi

html - 不同浏览器的 CSS3 渲染不同

转载 作者:行者123 更新时间:2023-11-28 08:29:40 25 4
gpt4 key购买 nike

我是一个相当新的编码员,所以我希望这个问题是有道理的。

我正在构建一个网站,目前正在处理导航栏。当我构建搜索栏时,使用 sprite 图像在不同浏览器中实时查看网站时遇到了一个问题。与 firefox、chrome、IE 和 Opera 相比,搜索按钮图像在 safari 上呈现不同。

<hgroup>
<form id=header-search>
<input class=searchbox placeholder="Search Spout TV"><input type=submit class=button value=""/>
</form>
<p class=login><a href="#">LogIn</a><p class=arrow-down></p></p>
<p class=line>|</p>
<p class=signup><a href="register.html">Sign Up</a></p>
</hgroup>

这是它的 CSS3 代码:

#header-search {
overflow: visible;
}
input.searchbox {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #af5354;
border: 1px solid #af5354;
border-radius: 5px;
color: #fff;
float: left;
height: 19px;
margin-left: 0.5em;
margin-top: 0.2em;
outline: 0 none;
padding-left: 0.5em;
padding-top: 0.3em;
text-align: left;
width: 220px;
}
input.searchbox {
margin-top: 00.3em;
}
input.searchbox:focus {
background: #e87476;
background: -moz-linear-gradient(top, #e87476 0%, #e87476 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));
outline: 0;
color: #FFF;
}
*::-webkit-input-placeholder {
color: #FFF;
}
*:-moz-placeholder {
color: #FFF;
}
*::-moz-placeholder {
color: #FFF;
}
*:-ms-input-placeholder {
color: #FFF;
}
#header-search input.button {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
float: left;
border: none;
background: url("../../assets/images/sprite.png") -142px -7px;
overflow: hidden;
}
#header-search input.button:hover {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
background: url("../../assets/images/sprite.png") -142px -47px;
float: left;
border: none;
}

如有任何帮助,我们将不胜感激。

谢谢。

最佳答案

html 元素的 View 在每个网络浏览器中都是不同的,这都是因为每个网络浏览器可能具有不同的引擎。如果你想在每个网络浏览器上都有类似的显示,也许你应该尝试使用 boostrap?1.下载地址:http://getbootstrap.com/2.接下来你必须将文件 bootstrap.min.css 放在你的 index.html 所在的位置3.接下来包含命令

<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />

之间

<head></head> 

标记。

第二种情况——如果你用html5和css3就不用用

-webkit-border-radius:

只需使用:

border-radius:

对于所有(实际版本)网​​络浏览器,它应该没问题。

或者我不明白你的问题..嗯?

关于html - 不同浏览器的 CSS3 渲染不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28334851/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com