Question

你好我们有一个包含链接和div的div，我给链接的宽度为70％，div的宽度为30％（总计达到100％）。它在chrome中运行良好，但它不适用于safari ..链接的宽度属性在safari中没有任何影响。请帮助

＆＃13;

.rec-p-b {
    width: 70%;
    background-color: #fff;
    border-radius: 0px;
    padding: 7px 10px;
}
.rec-p-b1 {
    width: 30%;
    background-color: #02020294;
    border: 1px solid #034039;
    border-radius: 0px;
    padding: 0px 5px;
}

＆＃13;

<div class="recomment_profile_b_view">
  <a target="_blank" href="" class="recomment_pro_button rec-p-b">Profile View</a>
  <button class="recomment_button rec-p-b1">
    <img src="images/recommend.png" alt="recomment">
  </button>
</div>

＆＃13;

Answer 1

链接标记是内联元素，因此您应将其设置为display: block，或inline-block或float: left以将其浮动为块元素。

您在添加宽度后添加了填充，总大小将等于padding + width。要解决此问题，您应该将box-sizing: border-box;添加到您的css中，将其合并为100％的大小：

.rec-p-b {
    float: left;
    width: 70%;
    background-color: #fff;
    border-radius: 0px;
    padding: 7px 10px;
    box-sizing: border-box;
}
.rec-p-b1 {
    float: left;
    width: 30%;
    background-color: #02020294;
    border: 1px solid #034039;
    border-radius: 0px;
    padding: 0px 5px;
    box-sizing: border-box;
}

Answer 2

我认为问题是你添加的填充。尝试使用box-sizing: border-box

* { box-sizing: border-box }

.rec-p-b {
    width: 70%;
    background-color: #fff;
    border-radius: 0px;
    padding: 7px 10px;
}
.rec-p-b1 {
    width: 30%;
    background-color: #02020294;
    border: 1px solid #034039;
    border-radius: 0px;
    padding: 0px 5px;
}

<div class="recomment_profile_b_view">
  <a target="_blank" href="" class="recomment_pro_button rec-p-b">Profile View</a>
  <button class="recomment_button rec-p-b1">
    <img src="images/recommend.png" alt="recomment">
  </button>
</div>

Answer 3

将display：block应用于锚标记将以下属性应用于（anchor＆amp; div）： box-sizing：border-box; float：left;

两种不同浏览器上的两种不同宽度

3 个答案: