我的html页面上有几个按钮,如下所示:
<button type="button" class="read-more"><a href="#">Read More</a></button>
他们在Chrome和Safari中都有响应 - 他们的工作非常好。但是,当我在mozzilla Firefox中测试它们时,它们根本没有响应。有谁知道这个问题是什么?
我尝试过这样做:
<a href="#"> <button type="button" class="read-more">Read more</button></a>
这会链接按钮,但它不显示可点击的光标,也不会拾取某些css(例如下划线和字体颜色)
答案 0 :(得分:5)
您的HTML无效。使用a validator。按钮不能包含锚点,锚点不能包含按钮。不同的浏览器会以不同的方式从该错误中恢复。
然后应用CSS使其看起来像你想要的那样。
答案 1 :(得分:0)
正如昆汀所说,您的HTML无效。如果你真的想使用默认按钮作为重定向,你可以创建一个这样的解决方法:
<form action="REDIRECTURLHERE"><input type="submit" value="BUTTON TEXT"></form>
其中REDIRECTURLHERE是放置目标网址的位置,BUTTON TEXT是输入按钮文字的位置。
答案 2 :(得分:0)
使用Button和Anchor标签的方式有点无效。
您可以使用ANCHOR标记进行重定向,也可以使用以下输入按钮。单击此按钮,将不会提交表单:
<input type="button" value="Read More" class="read-more" />
如果您希望提交表单,则必须使用提交输入类型。
答案 3 :(得分:0)
我也遇到过问题,按钮在Chrome中工作正常但在Mozilla火狐中没有。我在代码中做了以下更改,然后它在两个浏览器中都正常工作。
旧代码:
<input type="search" name="focus" class="form-control search-box" placeholder="{{Messages.Label.search}}" style="width:100%"
ng-model="dashboardCtrl.searchvalue" ng-change="dashboardCtrl.searchChangeHandler()" required >
<button class="close-icon" type="reset" ng-click="dashboardCtrl.removeSearchTab()"></button>
<img ng-src="/assets/images/search-icon.svg" width="18px" style="position:relative;left: 90%;top: -30px" ng-show="dashboardCtrl.searchvalue === undefined"/>
新代码: 我更改了上面的按钮,因为div和css保持不变,如下所示。
.search-box,.close-icon {
position: relative;
}
.search-box {
border: 1px solid $color_nobel_approx;
outline: 0;
border-radius: 0px;
padding-right:22px;
margin-top: 3px;
width: 190px;
box-sizing: border-box;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.search-box:focus {
box-shadow: 0 0 2px 2px $color_azure_radiance_approx;
border: 1px solid #bebede;
width: 100%;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: block;
outline: 0;
cursor: pointer;
right: -94%;
top: 2px;
height: 0px;
}
.close-icon:after {
content: "X";
display: block;
width: 20px;
height: 20px;
position: absolute;
z-index:1;
right: 5px;
top: -30px;
margin: auto;
padding: 2px;
text-align: center;
color: black;
font-weight: bold;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}