li加上边框浏览器放大排版错乱

li加上边框浮动后浏览器放大排版错乱，现在只知道box-sizing可以解决，可我并不想用box-sizing，望高人授教

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
```css
  ul {
            width: 891px;
            padding: 10px 0px 0px 0px;
            background-color: red;
            margin: 0 auto;
        }
        ul::after{
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
         li {
            width: 275px;
            height: 333px;
            border: 1px solid black;
            background-color: green;
            float: right;
            margin: 0px 10px 10px 10px;
            /* box-sizing: border-box; */
        }

```

经过代码测试，并没有发现错误，以下截图是测试来自分别不同浏览器的效果，都没有发现错位。
所以请检查一下你的css代码，是否有其他元素共用了一个属性导致

• 错位了。

  

  

宽度跟高度减去border的厚度

用boostrap的 span row做响应式布局