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

大家好，我有一个div，它包含一个链接和一个div，我给了链接70%的宽度，给了div 30%的宽度（加起来是100%）。它在chrome中工作正常，但在safari中不工作。链接的宽度属性在safari中不起任何作用。请帮助

.rec-p-b{
宽度：70%；
背景色：#fff；
边界半径：0px；
填充：7px 10px；
}
.rec-p-b1{
宽度：30%；
背景色：#020294；
边框：1px实心#034039；
边界半径：0px；
填充：0px 5px；
}

• 链接标记是一个内联元素，因此您应该将其设置为将其浮动为块元素
• 您在添加宽度的旁边添加了填充，总大小将等于

  padding

  +

  width

  。要修复它，您应该添加

  框大小：边框框添加到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;
  } 
  
  

---

我认为问题在于你添加的填充物。尝试使用

框大小：边框框

*{框大小：边框框}
.rec-p-b{
宽度：70%；
背景色：#fff；
边界半径：0px；
填充：7px 10px；
}
.rec-p-b1{
宽度：30%；
背景色：#020294；
边框：1px实心#034039；
边界半径：0px；
填充：0px 5px；
}

---

应用显示：块到锚定标记 将以下属性应用于两者（锚定和div）： 框大小：边框框；

---

浮动：左
因为链接是一个内联元素，所以我不确定您认为它是如何工作的。它甚至在chrome上也不工作，但在chrome上工作，但它不是：）使用内联块没有第二个div，我只看到一个按钮。