Question

我有两个元素（<a>和<button>），这两个元素都是从Tachyons共享相同的类：

<a class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1  " href="/edit-profile/photos"
>Confirm account</a>

<button class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1  " type="submit">Next</button>

预期的行为是它们都是相同的宽度，但它们是不同的（尽管风格相同）。

知道这里发生了什么吗？

Here's a Codepen demonstrating the issue.

Answer 1

在您的特定情况下，按钮具有边框和不同的字体，这是您的浏览器的默认样式。每个浏览器都有自己的默认值用于每种类型的元素，这就是为什么按钮和链接看起来像他们没有任何样式的方式。事实上说，没有任何造型和＃34;是不对的，而是没有任何额外的造型＆＃34;：

＆＃13;

__kernel void calculate(__global const float4 *x, __global const int *n, __global float3 *out){
    int i = get_global_id(0);
    for (int j=0; j<n; j++) {
         //do some calculation using x[i] and x[j]....
    }

    out[i] = calc_result;
}

＆＃13;

我没有通过你所拥有的所有css，因为你有一个单独元素的17个类，而且我太懒了，但它实际上可以为不同的元素设置不同的样式普通班：

＆＃13;

<button>I'm a button</button>
<a href="">I'm a link</a>

＆＃13;

.awesome {
  display: inline-block;
  border: 5px solid;
  width: 200px;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  margin: 10px 0 10px 10px;
  font-family: Arial, serif;
}
div.awesome {
  background-color: deepskyblue;
  border-color: royalblue;
  font-style: italic;
  color: darkslateblue;
}
span.awesome {
  background-color: orangered;
  border-color: firebrick;
  font-weight: bold;
  color: gold;
}

＆＃13;

按钮和链接样式表现不同

1 个答案: