如何仅在 JavaScript 中增加 Chrome 的边距值？

Question

我需要一些帮助来实现我的网站。我在 JS 中有一个 div 动画，它从右到左滑入屏幕（带有一个按钮和一个边距右动作）。它在 Firefox 中运行良好，但在 Chrome 中运行良好：margin-right 具有相同的值，当显示时，我在 FF 中完全看到 div，但在 GG 中没有，我只看到它的一部分。

隐藏 div 也会出现同样的问题；价值不够高，所以还有一个可见的部分。我在我的 CSS 中使用“-webkit-margin-end”为 Chrome 设置了更高的值，这有助于隐藏，但当显示时问题仍然存在。我想我必须在我的脚本中添加一个 Chrome 选项，所以“margin-right”值（或“-webkit-margin-end”值？）在动画时也可以增加，但我实际上找不到任何答案要求。

这可能是因为我还不够好，无法将它应用到我的代码中，这就是为什么我会非常感谢您的帮助。
此外，有没有办法在页面加载时滑动？当用户进入网站时，我希望 div“打开”。

这是我的一段代码：

/* CSS */


/* div */
#texte {
background-color:#FFFFFF;
border-left:0.5px solid #000000;
color:#000000;
font-size:0.9vw;
font-weight:normal;
font-family:"Proza Libre", sans-serif;
top:0;
bottom:0;
right:0;
margin-right:-125px;
-webkit-margin-end:-350px;
width:19.4%;
padding:1vw 0.6vw 1vw 1vw;
float:right;
position:fixed;
display:block;
z-index:1000;
overflow-x:hidden;
overflow-y:auto;
}


/* button */
#plus {
bottom:2.5vw;
right:2.5vw;
position:fixed;
color:#000000;
text-align:center;
font-family:serif;
font-size: 2.5vw;
font-weight:normal;
line-height:2.5vw;
text-decoration:none;
cursor:pointer;
z-index:1000;
border: 0.8px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:2.5vw;
height:2.5vw;
}


/* SCRIPT */


jQuery.easing.def = 'easeOutBounce';

$('#plus').click(function() {
if($(this).css("margin-right") == "125px")  {
$('#texte').animate({"margin-right": '-=125'}, 'slow');
$('#plus').animate({"margin-right": '-=125'}, 'slow');
}
else {
$('#texte').animate({"margin-right": '+=125'}, 'slow');
$('#plus').animate({"margin-right": '+=125'}, 'slow');
}

});

火狐：

铬：

Answer 1

与其为每个特定于浏览器的错误找到一个临时解决方案，不如尝试找到一种方法让您的代码在每个浏览器中都以相同的方式工作。

我会避免操纵边距。相反，我建议有一个固定宽度的主要DIV，然后在里面有另一个DIV，里面有你需要的填充物。然后用right属性做动画。

检查这个 sn-p 看看这个演示是否适合你。

function togglePanel() {
  if (parseInt($('#main').css('right')) == 0) {
    // get the current width (+ horizontal padding) (+ the border size * 2)
    width = $('#main').width() + parseInt($('#main').css('padding-left')) + parseInt($('#main').css('padding-right')) + 2;
    $('#main').animate({"right": -width}, 'slow');
  } else {
    $('#main').animate({"right": 0}, 'slow');
  }
}

$('#toggleMain').on('click', function() {
  togglePanel();
});

$(document).ready(function() {
  togglePanel();
});

* {box-sizing: border-box;}

#main {
  background:blue;
  position:absolute;
  padding:10px;
  right:-222px;
  top:0px;
  bottom:0px;
  width:200px;
  border:1px solid red;
  }

#inner {
  width:100%;
  padding:10px;
  border:1px solid green;
  background:orange;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"><div id="inner">Here goes the text<br/>and more text</div></div>
<button id="toggleMain">Toggle</button>

Answer 2

试试这个，用于检测是否镀铬并添加边距。

$(document).ready(function(){
  var isChrome = !!window.chrome;

  if(isChrome) {
    $(".element").css("margin-right", "30px");
  }
});

Answer 3

浏览器检测不是一个好的做法，例如Is jQuery $.browser Deprecated?

更好的方法是提供通用的跨浏览器解决方案。

例如，您可以使用normalize.css，然后应用您自己的 css。这可能会使您需要的 css “重置”，因此您自己的 css 在所有浏览器中看起来都不错/相等。